bootstrap popup window

最新推荐文章于 2023-07-24 22:16:36 发布

bachelorchen

最新推荐文章于 2023-07-24 22:16:36 发布

阅读量2.1k

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/bachelorchen/article/details/44754353

版权

bootstrap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

ref:

http://www.w3cschool.cc/bootstrap/bootstrap-v2-modal-plugin.html

http://getbootstrap.com/javascript/

example code:

<html>
<head>
<title> Date time picker </title>
<link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="jquery-2.1.3.min.js"></script>
<script src="bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>

</head>
<body>
  
  <!-- Large modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

  <div class="modal fade bs-example-modal-lg" id="bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      
      <div class="modal-content">
        <div class="modal-header"> 
          Large Modal
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer"> 
          modal footer
        </div>
      </div>
    </div>
  </div>

  <!-- Small modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

  <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        ...
      </div>
    </div>
  </div>
  
<script> 
  var modal = $('#bs-example-modal-lg');
  console.log(modal);
  modal.on('show.bs.modal', function(){console.log("show");});
  modal.on('shown.bs.modal', function(){console.log("shown");});
</script>
</body>
</html>

following is the method to add event listener.

Just wanted to say that Bootstrap 3 handles this a bit differently. The event name is "shown.bs.modal".

$('#themodal').on('shown.bs.modal', function () {
   $("#txtname").focus();
});

or put the focus on the first visible input like this:

.modal('show').on('shown.bs.modal', function ()
{
    $('input:visible:first').focus();
})

http://getbootstrap.com/javascript/#modals

bachelorchen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap popup window

ref:http://www.w3cschool.cc/bootstrap/bootstrap-v2-modal-plugin.htmlhttp://getbootstrap.com/javascript/example code: Date time picker Large modal
复制链接

扫一扫

专栏目录