<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{ width: 100vw;}
 
如果你不需要模态框弹出时的动画效果(淡入淡出效果),删掉 .fade 类即可。
参考:https://v3.bootcss.com/javascript/#js-overview

boostrap --- 弹窗modal的使用的更多相关文章

  1. 课时8—弹窗modal

    首先弹窗的实现效果如下: 主要实现的代码如下: CSS: .header,.footer,.wrap-page{ position:absolute; left:; right:; backgroun ...

  2. 关于boostrap的modal隐藏问题(前端框架)

    Modal(模态框) 首先,外引boostrap和Jquery的文件环境: <link rel="stylesheet" href="https://cdn.sta ...

  3. ng2-bootstrap的modal嵌套时无法滚动的情况

    在ng2-bootstrap的弹窗modal中再弹出另外一个弹窗,关闭子弹窗后,父弹窗会出现无法上下滚动的情况. 通过观察样式可知,关闭子弹窗前,父弹窗的body上是有modal-open样式的,关闭 ...

  4. Bootstrap modal.js 源码分析

    /* ======================================================================== * Bootstrap: modal.js v3 ...

  5. Blazor组件的new使用方式与动态弹窗

    1. 前言 在Blazor中的无状态组件文中,我提到了无状态组件中,有人提到这个没有diff,在渲染复杂model时,性能可能会更差.确实,这一点确实是会存在的.以上文的方式来实现无状态组件,确实只要 ...

  6. Knockout Mvc Compoment FrameSet

    Knockout Mvc Compoment FrameSet 框架文件结构 01-   网站(表现层),mvc主要作用视图展示. 02-   模型(Model),主要作用承载视图数据结构,网站前后台 ...

  7. Bootstrap模态弹出框

    前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...

  8. what?iView的DropDown没有element的split-button?提issure?等不及了,自己实现一个

    开始正文之前,有必要先说自己实现这个组件的必要性描述. 话说大家做表格时,增删查改按钮都是放在哪里的?最简单的方式应该是这样: 是不是感觉奇丑无比啊,于是改成了这样: 但是这种操作按钮一多后就没位置放 ...

  9. JavaScript 示例

    JavaScript 示例 <html lang="en"> <head> <meta charset="UTF-8"> & ...

随机推荐

  1. 201871010116-祁英红《面向对象程序设计(java)》第十五周学习总结

    博文正文开头格式:(2分) 项目 内容 <面向对象程序设计(java)> https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://ww ...

  2. 201871010108-高文利《面向对象程序设计(java)》第一周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>  https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>  ...

  3. 201871010109-胡欢欢《面向对象程序设计(java)》第一周学习总结

    <面向对象程序设计(java)>第一周学习总结 正文开头: 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 ...

  4. python直接赋值、浅拷贝、深拷贝的区别

    一:直接赋值 赋值,就是对象的引用,给对象起别名. i = 8j = iprint("值是:",i, "地址:",id(i))print("值是:&q ...

  5. 【PAT甲级】Public Bike Management 题解

    题目描述 There is a public bike service in Hangzhou City which provides great convenience to the tourist ...

  6. 如何将Excel表批量赋值到ArcGIS属性表

    情景再现 现需要将Excel表信息批量赋值(不是挂接)到Shp文件的属性表,两张表的字段.记录数一模一样,至于为什么会出现这样的问题,咱也不敢问,只有想个法子把它搞定! 原始的Excel信息表共57列 ...

  7. Python连载43-current中的map函数、xml文件

    一.current中的map函数 1.map(fn,*iterable,timeout=None) (1)跟map函数相类似(2)函数需要异步执行(3)timeout代表超时时间 (4)map和sub ...

  8. linux 常用配置

    linux mysql yum 配置 https://blog.csdn.net/wngpenghao/article/details/78862923 linux jdk1. yum install ...

  9. Shell脚本中的while getopts用法小结

    getpots是Shell命令行参数解析工具,旨在从Shell Script的命令行当中解析参数.getopts被Shell程序用来分析位置参数,option包含需要被识别的选项字符,如果这里的字符后 ...

  10. gitlab与jenkins结合构建持续集成

    Jenkins是java编写,需要安装JDK,这里采用 yum 安装,对版本有需求的,可以到 oracle 官网下载 JDK. yum install -y java-1.8.0-openjdk 一. ...