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 ...
随机推荐
- vscode快捷键,让你脱离鼠标,敲代码嗖嗖的
蓝色为本人需要经常用到的,可忽略 vsCode软件相关 显示资源管理器:Ctrl + Shift + E 显示搜索: Ctrl + Shift + F 显示git:Ctrl + Shift + G 显 ...
- C# 反射、使用场景
创建一个 Console 控制台应用程序, 1. 创建一个 Project 类 public class Project { public int ID { get; set; } public st ...
- Authenticator App 两步验证会不会造成亚马逊账号关联?
今天听人说,因为用Authenticator App做亚马逊两步验证造成了帐号关联…… 我给大家解释一下Authenticator的实现原理,作为计算机专业科班出身的我,此次从各方面了解并经过自己亲测 ...
- 关于jvm系统属性-Djava.awt.headless 模式
1. 什么是 java.awt.headless? Headless模式是系统的一种配置模式.在系统可能缺少显示设备.键盘或鼠标这些外设的情况下可以使用该模式. 2. 何时使用和headless mo ...
- android 连接蓝牙打印机 BluetoothAdapter
android 连接蓝牙打印机 BluetoothAdapter 源码下载地址:https://github.com/yylxy/BluetoothText.git public class Prin ...
- vue---发送数据请求的一些列的问题
使用vue做数据请求,首先考虑的是封装请求方法request.js import axios from 'axios' import Qs from 'qs' // 创建一个axios实例 const ...
- linux设置sudo不要密码
linux下,普通用户,sudo时需要密码 改成没密码, vi /etc/sudoers 在 root ALL=(ALL) ALL后加一行 sysusr ALL=(ALL) NOPASSWD: ALL ...
- spark-submit --files 动态加载外部资源文件
在做spark时,有些时候需要加载资源文件,需要在driver或者worker端访问.在client模式下可以使用IO流直接读取,但是在cluster模式下却不能直接读取,需要如下代码: val is ...
- ThinkPHP5最新URL访问:PATH_INFO和兼容模式
https://www.jianshu.com/p/c43fb5817ae1 http://tp5.com/index.php?s=USER/manger_user/add&n=2000&am ...
- tensorflow2.0手写数字识别
import tensorflow as tf import matplotlib.pyplot as plt import numpy as np datapath = r'D:\data\ml\m ...