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">&times;</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>

最后放一张效果图：

转载于:https://www.cnblogs.com/mantishell/p/10834903.html

asp.net mvc 使用bootstrap的模态框插件modal相关推荐

Bootstrap 模态框插件Modal 的事件
事件 Bootstrap模态框插件modal提供了 4 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应.这些事件及含义见表 5‑2. 表 5‑2 Bootstrap模态框插件modal ...
Bootstrap 模态框插件Modal 的方法
方法 Bootstrap模态框插件Modal的方法主要用来打开.关闭.隐藏Bootstrap模态框插件Modal: 1..modal(options) 使用一个可选的对象参数 options 调用 B ...
Bootstrap 模态框插件Modal 的选项
选项 Bootstrap模态框插件modal提供了 4 个选项,所有的选项都可以通过 data 属性或 JavaScript 进行设置.见表 5‑1: 表 5‑1 Bootstrap模态框插件moda ...
Bootstrap 模态框插件modal的调用方式
调用方式 1.data属性调用使用 data 属性调用模态对话框时,一般要设置两个属性,一个是 data-toggle 属性,另一个是 data-target 属性. data-toggle 属性定 ...
ASP.NET MVC使用Bootstrap系统（2）——使用Bootstrap CSS和HTML元素
ASP.NET MVC使用Bootstrap系统(2)--使用Bootstrap CSS和HTML元素阅读目录 Bootstrap 栅格(Grid)系统 Bootstrap HTML元素 Boots ...
ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件
Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉菜单.导航.警告框.弹出框.输入框组等.在你的Web Application中使用这些组件,将为用户提供一致和简单易用的用户体验. ...
Bootstrap中模态框多层嵌套时滚动条问题
在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...
Bootstrap 学习之js插件（模态框（Modal）插件）
Bootstrap 模态框(Modal)插件模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. ( ...
Bootstrap中过渡效果（Transition）模态框插件的使用案例
通过使用模态框效果实现弹出框的登录效果: 效果图: <form id="formmodal" action="#"><h3>过渡效果(T ...

asp.net mvc 使用bootstrap的模态框插件modal

asp.net mvc 使用bootstrap的模态框插件modal相关推荐

最新文章

热门文章