bootstrap弹出框测试

最新推荐文章于 2021-11-22 22:50:19 发布

weixin_30776273

最新推荐文章于 2021-11-22 22:50:19 发布

阅读量50

点赞数

原文链接：http://www.cnblogs.com/zouxiaojia/p/8390834.html

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>弹出窗测试</title>
    <link href="js/library/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <script src="js/library/jquery-2.2.3.min.js"></script>
    <script src="js/library/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script>
        window.onload = function () {
            var otherCityPopover = $("#otherCity_a").popover({ html: true, trigger: 'focus', placement: "bottom", delay: 2000, content: function () { return document.getElementById('otherCity_div').innerHTML; } });
            otherCityPopover.on("mouseover", function () {
                otherCityPopover.popover('show');
                $(".popover").one("mouseleave", function () { otherCityPopover.popover('hide'); });
                $(document.body).one("click", function () { otherCityPopover.popover('hide'); });
            });
        }
    </script>
</head>
<body>
    <label id="otherCity_a" class="btn btn-default" style="width:59px;">
        其他
    </label>
    <div id="otherCity_div" style="display:none">
        <div style="width:200px; display:inline-block;">
内容
            </div>
    </div>
</body>
</html>