编译器: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>

最后放一张效果图:

asp.net mvc 使用bootstrap的模态框插件modal的更多相关文章

  1. Bootstrap 实例 - 模态框(Modal)插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Bootstrap <基础三十二>模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  3. bootstrap的模态框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Bootstrap 模态框(Modal)插件id冲突

    <!DOCTYPE html><html><head>    <meta charset="utf-8">     <titl ...

  5. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

  6. ASP.NET MVC使用Bootstrap系列(4)——使用JavaScript插件

    阅读目录 序言 Data属性 VS 编程API 下拉菜单(dropdown.js) 模态框(modal.js) 标签页(tab.js) 工具提示(tooltip.js) 弹出框(popover.js) ...

  7. Knockout.js, Asp.Net MVC and Bootstrap 前端设计

    原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...

  8. ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件

    阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...

  9. Bootstrap学习5--bootstrap中的模态框(modal,弹出层)

    bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集. 务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 b ...

随机推荐

  1. vscode快捷键,让你脱离鼠标,敲代码嗖嗖的

    蓝色为本人需要经常用到的,可忽略 vsCode软件相关 显示资源管理器:Ctrl + Shift + E 显示搜索: Ctrl + Shift + F 显示git:Ctrl + Shift + G 显 ...

  2. C# 反射、使用场景

    创建一个 Console 控制台应用程序, 1. 创建一个 Project 类 public class Project { public int ID { get; set; } public st ...

  3. Authenticator App 两步验证会不会造成亚马逊账号关联?

    今天听人说,因为用Authenticator App做亚马逊两步验证造成了帐号关联…… 我给大家解释一下Authenticator的实现原理,作为计算机专业科班出身的我,此次从各方面了解并经过自己亲测 ...

  4. 关于jvm系统属性-Djava.awt.headless 模式

    1. 什么是 java.awt.headless? Headless模式是系统的一种配置模式.在系统可能缺少显示设备.键盘或鼠标这些外设的情况下可以使用该模式. 2. 何时使用和headless mo ...

  5. android 连接蓝牙打印机 BluetoothAdapter

    android 连接蓝牙打印机 BluetoothAdapter 源码下载地址:https://github.com/yylxy/BluetoothText.git public class Prin ...

  6. vue---发送数据请求的一些列的问题

    使用vue做数据请求,首先考虑的是封装请求方法request.js import axios from 'axios' import Qs from 'qs' // 创建一个axios实例 const ...

  7. linux设置sudo不要密码

    linux下,普通用户,sudo时需要密码 改成没密码, vi /etc/sudoers 在 root ALL=(ALL) ALL后加一行 sysusr ALL=(ALL) NOPASSWD: ALL ...

  8. spark-submit --files 动态加载外部资源文件

    在做spark时,有些时候需要加载资源文件,需要在driver或者worker端访问.在client模式下可以使用IO流直接读取,但是在cluster模式下却不能直接读取,需要如下代码: val is ...

  9. ThinkPHP5最新URL访问:PATH_INFO和兼容模式

    https://www.jianshu.com/p/c43fb5817ae1 http://tp5.com/index.php?s=USER/manger_user/add&n=2000&am ...

  10. tensorflow2.0手写数字识别

    import tensorflow as tf import matplotlib.pyplot as plt import numpy as np datapath = r'D:\data\ml\m ...