zoukankan      html  css  js  c++  java
  • boostrap --- 弹窗modal的使用

    <input id="btntext" type="button" value="添加文本组件" data-toggle="modal" data-target="#myModal01"  href="../SysManage/ZuJianManage.aspx"/>
    <!-- Modal -->
    <div class="modal hide fade" id="myModal01" tabindex="-1" role="dialog">
    <div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
    <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body"></div>
    </div>
    注意:data-target属性,指向了model的id,所以点击按钮,model就会弹出来了。
    js来控制,如下代码:
    显示:$('#myModal01').modal('show');
    隐藏:$('#myModal01').modal('hide');
    开关:$('#myModal01').modal('toogle');
    事件: $('#myModal01').on('hidden', function () {// do something…});
     
    弹窗弹出如果存在双滚动条,那就是 model宽度和容器宽度不一致 ,如:body,html设置为100vw,那么.modal{ 100vw;}
     
    如果你不需要模态框弹出时的动画效果(淡入淡出效果),删掉 .fade 类即可。
    参考:https://v3.bootcss.com/javascript/#js-overview
  • 相关阅读:
    Docker安装以及运行第一个HelloWorld
    logstash-配置文件详解
    oh my zsh 常用插件
    Linux之Shell基本命令
    Linux的基本命令
    Vue
    rest_framwork之认证组件,权限组件,频率组件
    rest_framwork之序列化组件
    rest_framwork之APIView
    中间件
  • 原文地址:https://www.cnblogs.com/mary-123/p/10977630.html
Copyright © 2011-2022 走看看