效果图：

注意引入的文件,js文件要在前面

Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：

 ☑ 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮

 ☑ 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容

☑ 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

    <script src="~/Script/jquery-1.11.2.min.js"></script>

    <script src="~/bootstrap-3.3.5-dist/js/bootstrap.js"></script>

    <link href="~/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />

</head>

<body>

    <div>

        <input id="Button1" type="button" value="弹窗" class="btn btn-primary btn-lg" data-toggle="modal"

   data-target="#myModal" />

   </div>

        <!-- 模态框（Modal） -->

<div class="modal fade" id="myModal"  >

   <div class="modal-dialog">

      <div class="modal-content">

         <div class="modal-header">

            <button type="button" class="close"  > 

            </button>

            <h4 class="modal-title" id="myModalLabel">

               模态框（Modal）标题

            </h4>

         </div>

         <div class="modal-body">

             <input id="Text1" type="text"  class="form-control"/>

         </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>

BootStrap弹窗的更多相关文章

  1. bootstrap弹窗、弹出层、modal

    bootstrap弹窗.弹出层.modal 引入bootstrap的js文件    如下div代码 <div class="modal fade" id="myMo ...

  2. bootstrap 弹窗或者提示框插件 bootstrap-growl 和bootstrap-notify

    Bootstrap简单好用的页面右上角咆哮提示框 - daidaineteasy的专栏 - CSDN博客https://blog.csdn.net/daidaineteasy/article/deta ...

  3. Yii2 框架下bootstrap 弹窗预览视频等~

    Yii2 本身已经引用了'yii\bootstrap\BootstrapAsset',所以使用bootstrap 非常简洁. 1 在PHP页面引用命名空间 use app\assets\AppAsse ...

  4. 使用ASP.NET AJAX与Bootstrap 弹窗解决方案

    我在做采购系统时,因为使用了ASP.NET AJAX的UpdatePanel的控件,可以使得页面局部刷新显示.但是使用起来问题还是很多. 下面列出了一种情况,花了将近5个小时才算解决,虽然不是很完美, ...

  5. bootstrap 弹窗 数据清除

    bootstrap modal操作简单易用, //清除弹窗原数据 $("#create_modal").on("hidden.bs.modal", functi ...

  6. EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之：bootstrap弹窗功能的实现

    在web前端的网页设计中,为了展示出简洁的网页风格和美观的效果,往往就会使用弹窗效果 在EasyNVR前端页面录像检索功能时,必然会播放录像,如果单独为播放录像文件排一个界面,用户在使用上会更加繁琐, ...

  7. EasyNVR摄像机网页无插件直播方案H5前端构建之：bootstrap弹窗功能的实现方案与代码

    前言介绍 在web前端的网页设计中,为了展示出简洁的网页风格和美观的效果,往往会使用弹窗效果在EasyNVR前端页面录像检索功能时,必然会播放录像,如果单独为播放录像文件排一个界面,用户在使用上会更加 ...

  8. Bootstrap弹窗插件（拟态框）关闭后回调函数

    $(function(){ $('#questionnaire').on('hidden.bs.modal',function(){ //清除缓存方法 }); }); 事件 Bootstrap 的模态 ...

  9. 写一篇 Bootstrap弹窗确认的文章。本周完成

    思路; 点击按钮,显示模态 点击确定,异步提交 根据结果,删除指定的记录

随机推荐

  1. Backbone.Events—纯净MVC框架的双向绑定基石

    Backbone.Events-纯净MVC框架的双向绑定基石 为什么Backbone是纯净MVC? 在这个大前端时代,各路MV*框架如雨后春笋搬涌现出来,在infoQ上有一篇 12种JavaScrip ...

  2. google chrome 32 升级变更找回user agent(google chrome lose user agent)

    chrome32中user agent 找不着了?没关系,看我画的图吧.为什么是英文的,国际化嘛...

  3. Codeforces Round #311 (Div. 2) D. Vitaly and Cycle 奇环

    题目链接: 点这里 题目 D. Vitaly and Cycle time limit per test1 second memory limit per test256 megabytes inpu ...

  4. JavaScript跨域总结与解决办法(转)

    JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首先什么是跨域 ...

  5. 让站长在SEO时更得心应手的六个细节

    分析一下SEO的心得,希望能对很多做网站优化和做网站推广的站长有帮助,现在做SEO的人越来网站推广越多,即使很多人在做,但不知道自己能否成功,自己的优化是否会见效,所以在这里还是来分享一下咱们在SEO ...

  6. 【BZOJ】【2594】【WC2006】水管局长数据加强版

    LCT 动态维护MST嘛……但是有删边= =好像没法搞的样子 离线记录所有修改&询问,倒序处理,就可以变删边为加边了- 论如何用LCT维护最小生成树:先搞出一棵最小生成树,然后每次加边(u,v ...

  7. select模式

    在很多比较各种网络模型的文章中,但凡提到select模型时,都会说select受限于轮询的套接字数量,这个 数量也就是系统头文件中定义的FD_SETSIZE值(例如64).但事实上这个算不上真的限制. ...

  8. DelayedOperationPurgatory之DelayedOperation pool

    purgatory就是炼狱的意思. 当一个DelayedOperation需要被delay时,它就被放到DelayedOperationPurgatory,相当于进行一个等待池.上一篇blog提到过, ...

  9. 翻译：用Javascript的Function构造器伪造上下文 by Ben Nadel

    在我的jQuery模板标记语言(JTML)项目中,我需要一种方式将JTML模板编译到JS函数,这样它们就可以如期地在任何时候转换成新的HTML标记.但这是一个严峻的问题,因为JTML代码涉及非作用域( ...

  10. linux源代码阅读笔记 linux文件系统（三）

    当系统申请一个新的inode时.系统并不会对磁盘进行读写.它会在存储在内存的inode表(inode_table)中寻找一个空闲的位置. 如果找到了,直接返回该inode.否则要等待一个空闲的位置. ...