zoukankan      html  css  js  c++  java
  • bootstrap modal

    模态框提供了两个可选尺寸,通过为 .modal-dialog 增加一个样式调整类实现。加modal-lg,加modal-sm,不加也可以,共有三种尺寸。

    触发方式,data-target, 感觉比js得好用

    触发modal的元素,给modal传值:可传多个值

    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-user='sfp' data-name='hh'>
          Launch demo modal
        </button>
    
    $('#myModal').on('show.bs.modal', function(event){
          var button = $(event.relatedTarget);
          var user = button.data('user');
          var name = button.data('name');
          console.log(user);
          console.log(name);
        })
    

    hide的话,就找不到谁触发modal的元素

      

    button 中也可以通过href来触发,不过一般不会这么写 

    传参可以通过data-或者option

    backdrop:static,点击遮罩层,模态框不会被关闭

    backdrop:false,遮罩层,不会变灰

    keyboard:键盘上的 esc 键被按下时关闭模态框。

    show:模态框初始化之后就立即显示出来。  也很有用,再加某个条件才能show;如果一个modal是否立即显示 是唯一的,才可以这样用;如果一个按钮,点击之后,还要判断是否触发,就不能在modal上设置show了。

    remote:如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容(只加载一次)并插入 .modal-content 内。如果使用的是 data 属性 API,还可以利用 href 属性指定内容来源地址。下面是一个实例:

    <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>  

       

    方法:

    .modal('toggle'):在模态框显示或隐藏之前返回到主调函数中(也就是,在触发 shown.bs.modal 或 hidden.bs.modal 事件之前)。
    .modal('show'):在模态框显示之前返回到主调函数中 (也就是,在触发 shown.bs.modal 事件之前)。
    .modal('hide'):在模态框隐藏之前返回到主调函数中 (也就是,在触发 hidden.bs.modal 事件之前)。
    .modal('handleUpdate'):modal open,height change,readjust modal's position.

    事件:

    show.bs.modal:show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素,则此元素可以通过事件的 relatedTarget 属性进行访问。
    shown.bs.modal:此事件在模态框已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发。如果是通过点击某个作为触发器的元素,则此元素可以通过事件的 relatedTarget 属性进行访问。
    hide.bs.modal:hide 方法调用之后立即触发该事件。
    hidden.bs.modal:此事件在模态框被隐藏(并且同时在 CSS 过渡效果完成)之后被触发。
    loaded.bs.modal:从远端的数据源加载完数据之后触发该事件。

    如果想点击modal中的按钮,触发一定的事件,只能自己添加了。因为唯一的操作hide,不能区分是否要上传文件。

    官网写的是,show之后传参和识别事件源;现在我想hide之后识别事件源,应该只能自己找了。

  • 相关阅读:
    ImportError: libgthread-2.0.so.0: cannot open shared object file: No such file or directory
    pycocotools使用教程
    with torch.no_grad() 详解
    虚拟机Ubuntu上下载Pytorch显示超时
    Deep Layer Aggregation DLA网络的结构
    tgz文件解压命令
    install mysql at linux
    devops issue
    process data
    unittest
  • 原文地址:https://www.cnblogs.com/wang-jing/p/4773293.html
Copyright © 2011-2022 走看看