asp.net mvc 使用bootstrap的模态框插件modal
编译器:vs2012
jquery版本:jquery-1.10.2.js
bootstrap:bootstrap.js v3.0.0,包含modal插件
我们要实现一个使用模态框展示从服务器获取的数据的功能。
一、首先在页面上添加一个按钮,用来触发请求服务器数据,并打开模态框。
<button class="btn btn-primary" id="just-test">演示</button>
然后再添加一个外层的div,暂且让我称为容器吧。
<div class="modal fade" id="myModal" data-remote="/home/test"></div>
二、添加js代码,添加事件处理
$('#just-test').click(function (e) {
var $that = $(this);
e.preventDefault();
var url = $that.data('remote') || $that.attr('href');
//第一种:激活模态框
$('#myModal').modal();
$('#myModal').load(url);
//第二种
$('#myModal').modal({
remote:url
});
});
三、控制器
public ActionResult Test()
{
return PartialView();
}
页面
<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">在这里添加一些文本</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>
</div>
最后放一张效果图:
asp.net mvc 使用bootstrap的模态框插件modal的更多相关文章
- Bootstrap 实例 - 模态框(Modal)插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap <基础三十二>模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
- bootstrap的模态框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap 模态框(Modal)插件id冲突
<!DOCTYPE html><html><head> <meta charset="utf-8"> <titl ...
- Bootstrap使用模态框modal实现表单提交弹出框
Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...
- ASP.NET MVC使用Bootstrap系列(4)——使用JavaScript插件
阅读目录 序言 Data属性 VS 编程API 下拉菜单(dropdown.js) 模态框(modal.js) 标签页(tab.js) 工具提示(tooltip.js) 弹出框(popover.js) ...
- Knockout.js, Asp.Net MVC and Bootstrap 前端设计
原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...
- ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件
阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...
- Bootstrap学习5--bootstrap中的模态框(modal,弹出层)
bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集. 务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 b ...
随机推荐
- 第10组alpha冲刺(2/4)
队名:凹凸曼 组长博客 作业博客 组员实践情况 童景霖 过去两天完成了哪些任务 文字/口头描述 继续学习Android studio和Java 完善项目APP原型 展示GitHub当日代码/文档签入记 ...
- 刷题记录:[CISCN2019 华北赛区 Day1 Web1]Dropbox
目录 刷题记录:[CISCN2019 华北赛区 Day1 Web1]Dropbox 一.涉及知识点 1.任意文件下载 2.PHAR反序列化RCE 二.解题方法 刷题记录:[CISCN2019 华北赛区 ...
- Buffon投针问题
- docker 安装redis cluster集群
安装Redis镜像 docker pull yyyyttttwwww/redis 创建redis容器 docker run -it -d --name r1 -p 5001:6379 --net=ne ...
- Shell获取字符串长度的多种方法总结
摘自:https://www.jb51.net/article/121290.htm 前言 我们在日常工作中,对于求字符串操作在shell脚本中很常用,实现的方法有很多种,下面就来给大家归纳.汇总了求 ...
- 伟程君解决端口被占用问题(接口jmeter 本地端口被占用完了,jmeter报错的问题)(亲测是可以的)
1.在目录下创建文件local.conf(没有就创建目录和文件) touch /etc/sysctl.d/local.conf mkdir(创建文件夹) touch(创建文件) 2.往local.co ...
- 【电商日志项目之四】数据清洗-ETL
环境 hadoop-2.6.5 首先要知道为什么要做数据清洗?通过各个渠道收集到的数据并不能直接用于下一步的分析,所以需要对这些数据进行缺失值清洗.格式内容清洗.逻辑错误清洗.非需求数据清洗.关联性验 ...
- linux中的文件权限chmod
linux中的文件权限chmod 还是GPU集群那点事儿,集群之间磁盘互相挂载,普通用户也可以操作/cu02_nfs./cu04_nfs文件夹,这就牵扯到权限的问题,去google发现所谓的777 ...
- String初解
String 类型是不可变的对象,因此在每次对 String 类型进行改变的时候其实都等同于生成了一个新的 String 对象,然后有一次看到一个代码段,如下: 这段代码返回的是ture,当时以为是f ...
- 15 Filter过滤器和Listener监听器
1.Filter:过滤器 (1) 概念:生活中的过滤器:净水器,空气净化器,土匪.web中的过滤器:当访问服务器的资源时,过滤器可以将请求拦截下来,完成一些特殊的功能.过滤器的作用:一般用于完成通用的 ...