Bootstrap学习(七）modal模态框、data属性、过渡事件、滚动监听事件

本文链接：https://blog.csdn.net/qq_21567935/article/details/100074331

本文深入解析模态框的实现方式，包括如何通过ID触发、CSS样式调整及响应式设计。探讨模态框的事件处理，如显示、隐藏及过渡效果，并介绍如何利用jQuery和Bootstrap进行高效开发。

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

模态框

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

   <div class="modal" id="myModal" 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">&times;</span>
                      </button>
                      <h4 class="modal-title" id="myModallabel">Modal title</h4>
                  </div>
                  <div class="modal-body">
                      Content
                  </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</button>
                  </div>
              </div>
      </div>
   </div>
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" ></script>
   <script>
        $("#myModal").modal("show");
   </script>

注意：aria-hidden="true"是避免屏幕阅读器抓取（盲人阅读器）

按钮触发

通过ID

注意：data-toggle指以什么事件触发，常用的如modal,popover,tooltips等，data-target指事件的目标,将这个目标的内容以模态框的形式展示。

 <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">触发模态框</button>

通过css

注意: .fade是缓慢显示的效果。.bs-example-modal-lg、modal-lg大弹框效果，lg改sm小弹框效果

   <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target=".bs-example-modal-lg">触发模态框</button>
    <div class="modal fade bs-example-modal-lg" >
        <div class="modal-dialog modal-lg">

按钮触发

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example" data-whatever="@mdo">open</button>
   <div class="modal fade" id="example" tabindex="-1">
       <div class="modal-dialog">
           <div class="modal-content">
               <div class="modal-header">
                   <div class="modal-title">Message</div>
               </div>
               <div class="modal-body">
                   <div class="input-group">
                       <input class="form-control" type="text" id="recipient-name">
                   </div>
               </div>
           </div>
       </div>
   </div>
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" ></script>
   <script>
      $("#example").on("show.bs.modal",function (event) {
          var button = $(event.relatedTarget);
          var recipient = button.data("whatever");
          var modal = $(this);
          modal.find(".modal-title").text("New Message to"+recipient)
          modal.find(".modal-body input").val(recipient)
      })
   </script>

注意: data-whatever="@mdo"指加了一个标签为whatever，值为@mdo的参数，这里标签名字为自定义。

注意: ("#myModal").on(“show.bs.modal”,function{})指在show方法后调用，此外"shown.bs.modal"指在模态框完全展示出来做一些动作，"hide.bs.modal"在hide方法后调用，"hiden.bs.modal"指关闭模态框时做一些动作，"loaded.bs.modal"指在模态框加载的同时做一些动作。

注意: eventObject.relatedTarget返回值是element类型，返回事件涉及的其他DOM元素。(selector).val(value)设置所有匹配元素的 value 属性的值。(selector).text(value)设置或返回被选元素的文本内容。

在这里插入图片描述

设置模态框响应样式

      $("#example").modal({
          backdrop: false
      })

注意:backdrop设置为false表明点击空白处模态框不会关闭，另外还有keyboard: false点击键盘esc无法关闭模态框。show：true表示初始化立即显示出来。三个值都默认为true,故需要改成false再填上去。

Date属性

如果要废去某个元素的bootstrap属性时用到,如果是针对某个插件，则变成(".alert .data-api")

$(document).off(".data-api")

还有其他方法：

      $("#example").on("show.bs.modal",function (e) {
          if (!data) return e.preventDefault()
      })

过渡事件

  <style>
        #mydiv{
            width:100px;
            height: 100px;
            background: red;
            -webkit-transition: width 2s;
            transition: width 2s;}
        #mydiv:hover{ width:400px;}
    </style>
</head>
<body>
   <div id="mydiv"></div>
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" ></script>
   <script>
      document.getElementById("mydiv").addEventListener("transitionend",function (e) {
          this.innerHTML="过渡事件已完成"})
   </script>

注意:document.getElementById()返回的是DOM对象，而$()返回的是jQuery对象。jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法。HTML DOM addEventListener() 方法用于向指定元素添加事件句柄。transitionend 事件会在 CSS transition 结束后触发。-moz-是针对firefox的，-webkit-是针对safari和chrome的浏览器内核。

在这里插入图片描述

滚动监听事件

<body data-spy="scroll" data-target=".navbar" data-offset="70">
  <div class="container">
      <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
          <div class="container-fluid">
              <div class="collapse navbar-collapse js-navbar-scrollyspy" id="myScrollspy">
                  <ul class="nav navbar-nav">
                      <li><a href="#one">part 1</a></li>
                      <li><a href="#two">part 2</a></li>
                      <li><a href="#three">part 3</a></li>
                      <li><a href="#four">part 4</a></li>
                  </ul>
              </div>
          </div>
      </nav>
      <h2 id="one" >one
      <p>上古卷轴5》多人Mod开发成员Yamashi在上个月为先前发表的“我们从不亏欠社区”的言论进行了致歉。开发团队也表示Yamashi其实是在粉丝们的持续轰炸和怒火的压力下，以及一些激进玩家向他发出的死亡威胁声明之后，才做出此番道歉声明的。</p>
      </h2>
       <h2 id="two">two
      <p> 不过近日这款Mod终于重启开发工作，同时开发组也对擅自使用Skyrim Script Extender代码这一点进行了致歉。不过近日这款Mod终于重启开发工作，同时开发组也对擅自使用Skyrim Script Extender代码这一点进行了致歉。根据最新开发进度报告，目前开发团队已经开始建立新代码库，但目前的版本仍然有很多bug，而且运行上也出现了不少问题。</p>
      </h2>
      <h2 id="three">three
      <p>播出的《权力的游戏》第八季第四集中，失误出现播出的《权力的游戏》第八季第四集中，失误出现播出的《权力的游戏》第八季第四集中，失误出现在前段时间播出的《权力的游戏》第八季第四集中，失误出现了星巴克咖啡的画面，观众们在吐槽制作方的同时也制作了各种P图进行恶搞。其中有玩家便将星巴克咖啡杯制作成了MOD带入到了《上古卷轴5》中，还将其命名为“Skyland coffee”，一起来看看吧。</p>
      </h2>
      <h2 id="four">four
          <p>播出的《权力的游戏》第八季第四集中，失误出现播出的《权力的游戏》第八季第四集中，失误出现播出的《权力的游戏》第八季第四集中，失误出现在前段时间播出的《权力的游戏》第八季第四集中，失误出现了星巴克咖啡的画面，观众们在吐槽制作方的同时也制作了各种P图进行恶搞。其中有玩家便将星巴克咖啡杯制作成了MOD带入到了《上古卷轴5》中，还将其命名为“Skyland coffee”，一起来看看吧。</p>
      </h2>
  </div>

注意:data-offset指触发导航栏变化的距离，一般设置为70显示效果最佳。data-spy=“scroll”——监听的元素（通常是 body）添加滚动监听事件。.js-navbar-scrollyspy似乎有没有都行。。。

在这里插入图片描述

每当新条目被激活时由滚动监听插件触发此事件

   <script>
     $("#myScrollspy").on('activate.bs.scrollspy',function (e) {
         alert("part");
     })
   </script>

参考资料：
1.https://blog.csdn.net/mp624183768/article/details/82137723
2.极客学院教程
3.https://www.cnblogs.com/huanxiyun/articles/5663314.html
4.https://developer.mozilla.org/zh-CN/docs/Web/Events/transitionend