bootstrap的模态框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 模态框(Modal)插件</title>
<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> //样式必须有,可以在这个地址下载
<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> //Jquery库,建议高一点
<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> //bootstrap库
</head>
<body>
<h2>创建模态框(Modal)</h2>
<!-- 按钮触发模态框 -->
<button id="view">自己手动调用莫态</button> //自己手动调用
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> //属性data-toggle和data-target就是触发模态框的属性
开始演示模态框
</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框(Modal)标题
</h4>
</div>
<div class="modal-body" id="hh">
在这里添加一些文本 (这里就是我们可以做处理的位子)
</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><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</body>
</html>
//自己手动调用 注意两个事件 模态框显示之前,隐藏时发生 这两个事件
//主要逻辑: 模态框在显示之前把需要操作的类容加载到模态框中, 隐藏时清空模态框
<script>
$(function(){
$("#myModal").modal({ backdrop: "static", keyboard: false });
$("#myModal").modal("hide"); //这个需要最后写
$("#myModal").on("hidden.bs.modal", function () {
$(this).removeData("modal"); //清除数据 当模态框对用户隐藏时发生
$("#view").click(function(){
$("#myModal1").modal("show"); //显示模态框
});
//模态框显示之前需要做什么在里面写就行
$("#myModal").on("show.bs.modal", function () {
//例如:异步去加载需要修改的信息
$.ajax({
type: "get",
url: "@Url.Action("EditProductType")",
data: { id: EditTypeID },
success: function (data) {
$("#hh").html(data);
},
error:function(){
alert("失败了");
}
});
});
});
})
</script>
bootstrap的模态框的更多相关文章
- Bootstrap 3 模态框播放视频
Bootstrap 3 模态框播放视频 I'm trying to use the Modal feature from Bootstrap 3 to show my Youtube video. I ...
- Bootstrap 实例 - 模态框(Modal)插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap -- 插件: 模态框、滚动监听、标签页
Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...
- Bootstrap中模态框多层嵌套时滚动条问题
在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...
- 黄聪:bootstrap中模态框modal在苹果手机上会失效
bootstrap中模态框在苹果手机上会失效 可将代码修改为<a data-toggle="modal" data-target="#wrap" hre ...
- layui实现类似于bootstrap的模态框功能
以前习惯了bootstrap的模态框,突然换了layui,想的用layui实现类似于bootstrap的模态框功能. 用到了layui的layer模块,例如: <!DOCTYPE html> ...
- WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法
由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作 ...
- Bootstrap使用模态框modal实现表单提交弹出框
Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...
- bootstrap删除模态框弹出并询问是否删除【通用删除模态框】
普通的询问是否删除的对话框比较low,可以利用bootstrap的模态框代替普通的对话框来实现删除. 效果: 点删除的时候弹出模态框询问是否删除,点确认的时候将需要删除的ID传到后台进行删除. 过程 ...
随机推荐
- restful架构风格设计准则(一)以资源为中心、自描述的请求响应、资源状态迁移为粒度
读书笔记,原文链接:http://www.cnblogs.com/loveis715/p/4669091.html,感谢作者! 一.需求描述 当用户在某个电子商务网站购物时,他首先查看要购买的商品分类 ...
- Docker学习笔记 - Docker数据卷的备份和还原
学习目标: 备份数据卷 还原数据卷 # 通过容器备份数据卷容器中的数据卷 docker run --volumes-from dvt5 -v ~/backup:/backup --name dvt10 ...
- 模板引擎ejs详解
singsingasong.js: const ejs=require('ejs'); ejs.renderFile('./views/singsingasong.ejs', {'name':'sin ...
- semver(Semantic Versioning)
Based on semver, you can use Hyphen Ranges X.Y.Z - A.B.C 1.2.3-2.3.4 Indicates >=1.2.3 <=2.3.4 ...
- Android:CheckBox控件
1)ChexkBox继承自CompoundButton组件: 2)isChecked()--确定是否选中:setChecked(bool checked)--设置选中或取消选中: 3)监听事件:Com ...
- hdu-1082 Matrix Chain Multiplication---栈的运用
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1082 题目大意: 题意大致是N个矩阵,如果要求计算的矩阵例如(AB),如果A的列等于B的行,进行:A ...
- python自带的web服务器
python自带的web服务器 python自带的包可以建立简单的web服务器 BaseHTTPServer 提供基本的web服务和处理类 SimpleHTTPServer 包含执行get请求的Sim ...
- [转]scrapy中的logging
logging模块是Python提供的自己的程序日志记录模块. 在大型软件使用过程中,出现的错误有时候很难进行重现,因此需要通过分析日志来确认错误位置,这也是写程序时要使用日志的最重要的原因. scr ...
- 关于CORS跨域问题的理解
起因 因为这段时间一个项目前后端分别部署在不同服务器的需要,抽空学习了一下CORS问题,不足之处,欢迎指教. 什么是CORS CORS是一个w3c标准,全称是"跨域资源共享"(Cr ...
- 虚拟机工作站创建虚拟机并安装Linux教程
前言: 今天开始学习一下Linux,之前早就想看,但是一直没时间,最近把其他知识整理完了,终于有时间来看一下Linux了. 本节只是安装虚拟机工作站,虚拟机,和Linux操作系统的过程,详细的记录了我 ...