bootstrap static modal

最新推荐文章于 2023-06-25 16:31:42 发布

原创最新推荐文章于 2023-06-25 16:31:42 发布 · 669 阅读

0 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

12 篇文章

订阅专栏

bootstrap

4 篇文章

订阅专栏

本文详细介绍了如何在网页中实现模态对话框，并通过实例展示了如何使用静态遮罩来控制对话框的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

modal 显示后，点击空白处不去 hide modal

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> modal </title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </head>
<body>
  <div class="container">

    <!-- Modal -->
    <div class="modal fade" id="staticModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            {backdrop:"static"}
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    <button id="btn-static-modal" class="btn btn-primary" value="clickevent">backdropStatic</button>
  </div>

  <script>
    $(document).ready(function(){
      $('#btn-static-modal').click(function(){
        $('#staticModal').modal({backdrop:'static'}).modal('show');
      });
    }); 
  </script>
</body>
</html>