引导:弹出窗口按钮链接不工作

Bootstrap: popover button link not working

本文关键字：链接 工作 按钮 窗口 引导      更新时间：2023-09-26

我使用了一些自定义的jquery引导弹出窗口。弹出窗口功能工作良好，但，如果我有添加一个按钮与外部链接，它不工作。查看代码:有两个按钮"Button1"为弹出窗口&

$(document).ready(function () {
  $("body").tooltip({   
    selector: "[data-toggle='tooltip']",
    container: "body"
  })
  .popover({
    selector: "[data-toggle='popover']",
    container: "body",
    html: true
  });
});
$('body').on('click', function (e) {
  $('[data-toggle="popover"]').each(function () {
    if(!$(this).is(e.target) &&
       $(this).has(e.target).length === 0 &&
       $('.popover').has(e.target).length === 0) {
      $(this).popover('hide');
    }
  });
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;">
  <a data-placement="top" role="button" class="btn btn-danger" data-toggle="popover" data-content="Popover" data-original-title="" title="">
    Button1
  </a>
  
  <a class="btn btn-danger" href="http://facebook.com" target="_blank">Button2</a>
</div>

您在第二个按钮中缺少一些data-toggle, data-placement语法!添加这些将使第二个按钮具有与第一个按钮相同的功能。我已将此添加到您的代码:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript"> $(document).ready(function () {
        $("body").tooltip({
            selector: "[data-toggle='tooltip']",
            container: "body"
        })
                .popover({
                    selector: "[data-toggle='popover']",
                    container: "body",
                    html: true
                });
    });
    $('body').on('click', function (e) {
        $('[data-toggle="popover"]').each(function () {
            if(!$(this).is(e.target) &&
                    $(this).has(e.target).length === 0 &&
                    $('.popover').has(e.target).length === 0) {
                $(this).popover('hide');
            }
        });
    });</script>
<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;">
    <a data-placement="top" role="button" class="btn btn-danger" data-toggle="popover" data-content="Popover" data-original-title="" title="">
        Button1
    </a>
    <a class="btn btn-danger" href="http://facebook.com" data-placement="top" data-toggle="popover" data-content="Popover" data-original-title="" title="" target="_blank">Button2</a>
</div>

堆栈溢出脚本阻止您的链接打开新页面/重定向。在你的代码中试试这个代码依赖:http://codepen.io/TunderScripts/pen/oYYbgW 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;">
  <a data-placement="top" role="button" class="btn btn-danger" data-toggle="popover" data-content="Popover" data-original-title="" title="">
    Button1
  </a>
  <a class="btn btn-danger" href="http://facebook.com" target="_blank">Button2</a>
</div>

$(document).ready(function () {
  $("body").tooltip({   
    selector: "[data-toggle='tooltip']",
    container: "body"
  })
  .popover({
    selector: "[data-toggle='popover']",
    container: "body",
    html: true
  });
});
$('body').on('click', function (e) {
  $('[data-toggle="popover"]').each(function () {
    if(!$(this).is(e.target) &&
       $(this).has(e.target).length === 0 &&
       $('.popover').has(e.target).length === 0) {
      $(this).popover('hide');
    }
  });
});
相关文章：