<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. linux下的set, export, env的区别

    set和export的区别 set可以用来显示所有变量的值,而export能将一个变量导出,在其子shell或子进程也可见 export和env的区别 两者的作用是一样的,只是env是一个外部工具 基 ...

  2. acwing 167. 木棒

    乔治拿来一组等长的木棒,将它们随机地砍断,使得每一节木棍的长度都不超过50个长度单位. 然后他又想把这些木棍恢复到为裁截前的状态,但忘记了初始时有多少木棒以及木棒的初始长度. 请你设计一个程序,帮助乔 ...

  3. Java之Scanner类

    Scanner类概述 一个可以解析基本类型和字符串的简单文本扫描器.简而言之,Scanner类的功能:可以实现键盘输入数据,到程序当中. 例如,以下代码使用户能够从 System.in 中读取一个数. ...

  4. centos6和centos7的防火墙基本命令

    一.centos6: 1.firewall的基本启动/停止/重启命令 $查看防火墙状态: service iptables status (/etc/init.d/iptables status) $ ...

  5. python接口自动化9-ddt数据驱动

    前言 ddt:数据驱动,说的简单一点,就是多组测试数据,比如点点点的时候登录输入正常.异常的数据进行登录. 实际项目中,自动化测试用得很少,但也有人用excel来维护测试数据 一.ddt 1.安装:p ...

  6. LeetCode 136:只出现一次的数字 Single Number

    题目: 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. Given a non-empty array of integers, every e ...

  7. 【Linux命令】centos防火墙使用和配置

    目录 firewalld iptables Linux中的防火墙(iptables,firewalld,ip6tables,ebtables).这些软件本身并不具备防火墙功能,他们的作用都是在用户空间 ...

  8. C++入门到理解阶段二基础篇(5)——C++流程结构

    1.顺序结构 程序从上到下执行 2.选择结构(判断结构) 判断结构要求程序员指定一个或多个要评估或测试的条件,以及条件为真时要执行的语句(必需的)和条件为假时要执行的语句(可选的). ​ C++ 编程 ...

  9. redis pipeline批量处理提高性能

    Redis使用的是客户端-服务器(CS)模型和请求/响应协议的TCP服务器.Redis客户端与Redis服务器之间使用TCP协议进行连接,一个客户端可以通过一个socket连接发起多个请求命令.每个请 ...

  10. Revit二次开发 屏蔽复制构件产生的重复类型提示窗

    做了很久码农,也没个写博客的习惯,这次开始第一次写博客. 这个问题也是折腾了我接近一天时间,网上也没有任何的相关博文,于是决定分享一下,以供同样拥有此问题的小伙伴们参考. 内容源于目前在做的一个项目, ...