zoukankan      html  css  js  c++  java
  • 模态框 modal datatoggle datatarget

    模态框 modal data-toggle data-target

     

    1. Data-*属性 模态框(modal) 触发事件(data-toggle) 触发对象data-target(ID 或类)

    2. 关闭所有data事件$(document).off(“.data-api”);

    关闭某个data事件$(document).off(“.button.data-api”)

    3. 接受三种不同类型的参数:

    $(‘#myModal’).modal()

    $(‘#myModal’).modal({keyboard:false})

    $(‘#myModal).modal(‘show’)

    4. 事件:$(‘#myModal’).on(‘show.bs.modal’,function(e){…})

    获取版本信息:$.fn.tooltip.Constructor.VERSION

    5. Modal>modal-dialog>modal-content>modal-header(>modal-title)+modal-body+modal-footer

    模态框大小modal-lg(大) modal-sm(小)  默认表示正常

    Data属性:data-toggle=”modal”  data-target=” #ID(.类)”

    6. data-backdrop (true[单击黑色背景会关闭当前弹窗] false[单击不变背景并不会关闭当前弹窗] static[单击黑色背景并不会关闭当前弹窗]])

    Data-keyboard(true[不变背景按ESC按不会关闭当前弹窗]  false[黑色背景按ESC会关闭当前弹窗])

    Data-show显示当前模态窗

    复制代码
     <div class="container">
          <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#myModal-lg" data-backdrop="static">大对话框 </button>
          <div class="modal fade" id="myModal-lg">
              <div class="modal-dialog modal-lg">
                   <div class="modal-content">
                        <div class="modal-header">
                            <button class="close" data-dismiss="modal">
                                 <span aria-hidden="true">× </span>
                            </button>
                            <h4 class="modal-title">大对话框 </h4>
                        </div>
                        <div class="modal-body">
                            <p>在弹出框显示的过程会有一个过渡效果大对话框宽度 </p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button>
                            <button type="button" class="btn btn-primary">保存 </button>
                        </div>
                   </div>
              </div>
          </div>
          <a href="#" id="btnDialog">小对话框 </a>
          <div class="modal fade" id="myModal-sm">
              <div class="modal-dialog modal-sm">
                   <div class="modal-content">
                        <div class="modal-header">
                            <button class="close" data-dismiss="modal">
                                 <span aria-hidden="true">× </span>
                            </button>
                            <h4 class="modal-title">小对话框 </h4>
                        </div>
                        <div class="modal-body">
                            <p>在弹出框显示的过程会有一个过渡效果小对话框宽度 </p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button>
                            <button type="button" class="btn btn-primary">保存 </button>
                        </div>
                   </div>
              </div>
          </div>
     </div>
    <script type="text/javascript" src="js/jquery-2.2.3.min.js" > </script>
    <script type="text/javascript" src="js/bootstrap.min.js" > </script>
    <script language="JavaScript">
         $(document).ready(function(){
             $('#btnDialog').click(function(){
                  $('#myModal-sm').modal({
                       backdrop:"static"
                  });
             });
         });
     </script>
    复制代码

    7.  事件 show.bs.modal在模态框弹出前执行  shown.sb.modal在模态框弹出后执行

    Hide.bs.modal在模态框隐藏前执行 hidden.bs.modal在模态框隐藏后执行

    $(‘#myModal-sm’).modal(“toggle”)   $(‘#myModal-sm’).modal(“show”)

    $(‘#myModal-sm’).on(‘show.sb.modal’,function(e){
               Alert(“show.bs.modal”);
    });

    8. 下拉菜单绑定事件 $('#dropMenu').dropdown("toggle");

    事件: show.bs.dropdown  shown.bs.dropdown hide.bs.dropdown hidden.bs.dropdown

    $(‘#.dropdown’).on(‘show.sb.modal’,function(){
               Alert(“show.bs.dropdown”);
    });

     https://www.cnblogs.com/xszjk/articles/5517937.html

  • 相关阅读:
    maven POM.xml 标签详解
    Spring Boot Starter 的基本封装
    谷歌浏览器屏蔽广告的插件
    关于mysql中触发器old和new
    centos7 安装zookeeper3.4.8集群
    Flink架构、原理与部署测试
    图解Spark API
    汇编器构造
    Oracle11g CentOS7安装记录
    如何创造一门编程语言?
  • 原文地址:https://www.cnblogs.com/lxwphp/p/15453428.html
Copyright © 2011-2022 走看看