繁体   English   中英

Bootstrap模式弹出框隐藏或关闭

[英]Bootstrap modal popover hide or close

我的模态引导程序有问题。 我尝试创建模式,并在模式内创建模式弹出框。 结果是打开的,并且不仅在单击按钮时打开。

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
<div class="modal-body">
    <a href="#" role="button" class="btn btn-default popover-test" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title" aria-describedby="popover64665">button</a>
    <div class="popover fade right in" role="tooltip" id="popover64665" style="top: 0px; left: 112px; display: block;">
        <div class="arrow" style="top: 50%;"></div>
        <h3 class="popover-title">A Title</h3>
        <div class="popover-content">And here's some amazing content. It's very engaging. right?</div>
    </div> 
</div>
</div>

我的jsfidle

1)您需要包含jQuery.jsbootstrap.js + bootstrap.css

2)如果没有JS ,它将无法正常工作,因此您需要设置例如script.js

3)在HTML <script src="script.js"></script>

4)在script.js输入:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus();
});

希望对您 有所 帮助... CODEPEN.io

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM