bootstrap 模态框显示文本内容_bootstrap模态框 文本框 - CSDN
精华内容
参与话题
  • Bootstrap使用模态框

    2016-08-11 19:25:27
    静态模态框: × 选择文件 取消 确定 1)使用javascript来打开modal: $('#modal

    静态模态框:

    <div class="modal fade" id="modal_test" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
       <div class="modal-dialog">
           <div class="modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                 <h4 class="modal-title" id="myModalLabel">选择文件</h4>
              </div>
              <div class="modal-body">
              </div>
    
              <div class="modal-footer center clearfix">
                   <button type="button" class="common_btn btn_cancel fl" data-dismiss="modal">取消</button>
                   <button type="button" class="common_btn btn_confirm fr" data-dismiss="modal">确定</button>
             </div>
          </div>
       </div>
    </div>
    1)使用javascript来打开modal:

    $('#modal_test').modal({backdrop: 'static'});

    a.其中backdrop: 'static'  点击页面其他地方,模态框不会关闭;

    b.{keyboard:false}  点击键盘上escapse也不会关闭模态框;

    2)在html中关闭模态框:data-dismiss="modal" 

    data-dismiss 是一个定制的 HTML5 data 属性。用于关闭模态窗口。

    3)html中打开模态框:

    data-toggle="modal"    HTML5 定制的 data 属性 data-toggle,用于打开模态窗口。

    data-target="#myModal"

    如:

    <!-- 按钮触发模态框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" 
       data-target="#myModal">
       开始演示模态框
    </button>
    
    <!-- 模态框(Modal) -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
       aria-labelledby="myModalLabel" aria-hidden="true">
       <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>
    </div>


    4)Show: .modal('show')手动打开模态框。

    5)Hide: .modal('hide')手动隐藏模态框。

    网址:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html讲的很好

    6)Bootstrap使用模态框,模态框的显示监听事件和消失监听事件:

    $('.tip_modal').on('hidden.bs.modal', function () {
        //执行一些动作...
     });
    
    $('#identifier').on('shown.bs.modal', function () {
      // 执行一些动作...
    });
     还有show.bs.modal hide.bs.modal
    事件类型 描述
    show.bs.modal show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素,则此元素可以通过事件的 relatedTarget 属性进行访问。
    shown.bs.modal 此事件在模态框已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发。如果是通过点击某个作为触发器的元素,则此元素可以通过事件的 relatedTarget 属性进行访问。
    hide.bs.modal hide 方法调用之后立即触发该事件。
    hidden.bs.modal 此事件在模态框被隐藏(并且同时在 CSS 过渡效果完成)之后被触发。
    loaded.bs.modal 从远端的数据源加载完数据之后触发该事件。

    7)改变模态框大小:

    在class=“modal-dialog”后面加上modal-sm(小) modal-lg(大);

    8)头部的关闭写的:

    <div class="modal-header">  
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
    </div>



    展开全文
  • Bootstrap模态对话框中显示动态内容

    千次阅读 2017-09-23 08:08:54
    首先引入bootstrap的js和css,在引入对应版本的jquery;添加按钮,点击弹出模态窗体:创建模态对话框: 确定 取消 var modelResult; $(function(){ $("#model").on("hide.bs.modal"), function(){ //在这里...

    首先引入bootstrap的js和css,在引入对应版本的jquery;


    添加按钮,点击弹出模态窗体:

    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal"  href="/Home/Test"></button>

    创建模态对话框:

    <div class="model fade" id="modal" tabindex="-1" role="dialog" aria_labelledby="myModelLabel" aria-hidden="true">

        <div class="modal-dialog">

            <div class="modal-content"></div>

            <button class="btn btn-primary btn-lg" οnclick="btnSaveClick()" data-dismess="modal">确定</div>

            <button class="btn btn-primary btn-lg" data-dismess="modal">取消</div>

      </div>

    </div>

    <script>

        var modelResult;

        $(function(){

            $("#model").on("hide.bs.modal"), function(){

                //在这里应用二级窗体返回的内容

            })

            });


        function btnSaveClick(){

            modelResult = this.parent.$("#txtName").val();

        }

    </script>

    注意:如果发现二级窗体打开一次后再打开失败,请看看href引用的界面中,是否在header中引入了css或js,这里不需要再进行引用,动态加载后会继承父窗体的js和样式

    展开全文
  • 引入文件       点击‘显示’按钮  $('#modalID').click(function () {  $('#newNotice').modal({backdrop:false}) ...改变内容  $('#changeModalID').click(function () {  $('

    引入文件

    <link rel="stylesheet" href="bootstrap.min.css">

        <link rel="stylesheet" href="style.css">
        <script src="jquery-1.12.4.min.js"></script>

        <script src="bootstrap.min.js"></script>

    点击‘显示’按钮

     $('#modalID').click(function () {
                $('#newNotice').modal({backdrop:false})
            })

    改变内容

     $('#changeModalID').click(function () {
                $('.notice-content-center').html(data);
            })

    关闭模态框

       $('.close-btn').click(function () {
                $('#newNotice').modal('hide')
            })

    展开全文
  • 关于BootStrap中Modal(模态框)使用心得

    万次阅读 多人点赞 2018-01-04 17:27:49
    关于BootStrap中Modal(模态框)使用心得 一、modal使用: 1.1、登录bootstrap官网,点击下载Bootstrap 1.2、导入对应的样式文件css 1.3、导入对应的js,需要导入bootstrap.js或者bootstrap.min.js文件,bootstrap的...
    关于BootStrap中Modal(模态框)使用心得

    一、modal使用:

    1.1、登录bootstrap官网,点击下载Bootstrap

    1.2、导入对应的样式文件css

    1.3、导入对应的js,需要导入bootstrap.js或者bootstrap.min.js文件,bootstrap的前提是jquery,所以我们要在导入bootstrap.js前面导入jquery.min.js

    对应导入代码:

    <!--导入样式-->
    <link href="Bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>
    <link href="Bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="Bootstrap/css/bootstrap.css" rel="stylesheet"/>
    <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <!--导入bootstrap.js包-->
    <script src="jquery/jquery-3.1.1.min.js"></script>
    <script src="Bootstrap/js/bootstrap.min.js"></script>

    1.4、从官网找到一个案例使用:

    <h2>创建模态框(Modal)</h2>
    <!-- 按钮触发模态框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
    <!-- 模态框(Modal) -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
       <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><!-- /.modal-content -->
       </div><!-- /.modal -->
    </div>

    二、modal打开:

    2.1、静态打开:通过data属性打开隐藏模态框

    设置按钮button的data-toggle:"modal"(以模态框的形式打开),data-target:"#myModal"(设置为modal的id)

    2.2、动态打开:以jquery代码为例

    $("#myModal").modal({

    remote:"test/test.jsp";//可以填写一个url,会调用jquery load方法加载数据

    backdrop:"static";//指定一个静态背景,当用户点击背景处,modal界面不会消失

    keyboard:true;//当按下esc键时,modal框消失

    })

    remote处可以填写jsp路径或者html路径,用来给modal框注入内容

    2.3、动态打开事件:

    在modal框加载同时,提供几个方法用来控制modal框

    $("#myModal").on("loaded.bs.modal",function{

    //在模态框加载的同时做一些动作

    });

    $("#myModal").on("show.bs.modal",function{

    //在show方法后调用

    });

    $("#myModal").on("shown.bs.modal",function{

    //在模态框完全展示出来做一些动作

    });

    $("#myModal").on("hide.bs.modal",function{

    //hide方法后调用

    });

    $("#myModal").on("hiden.bs.modal",function{

    //监听模态框隐藏事件做一些动作

    });

    2.4、解决remote只加载一次问题:

    我们在使用js动态打开modal框使用remote请求数据,只会加载一次数据,所以我们需要在每次打开modal框钱移除节点数据。

    解决方案:

    $("#myModal").on("hiden.bs.modal",function{

    $(this).removeData("bs.modal");

    });

    2.5、解决事件监听多次:

    第一次打开modal框正常,第二次,第三次,第n次打开就有可能会出现事件监听多次的奇怪问题(尤其是多个modal窗口叠加,出现这种问题的几率更高,我大致判断有可能是组件bug),所以无奈之举的办法,只适合应急使用:就是强行让他只调用监听一次

    int count = 0 ;

    $("#myModal").on("loaded.bs.modal",function{

    if(++count == 1){

    //调用你需要的方法

    }

    //在模态框加载的同时做一些动作

    });


    总结:modal框是个很好用的组件,不过官方文档提醒最好不要多个modal叠加很容易出现很难解决的前端组件问题。

    谢谢阅读,感谢对一名初级程序员的支持,只是分享一下自己遇到的问题,供参考!


    联系作者:



    加群交流:


    展开全文
  • bootstrap模态框 模态框手动关闭

    万次阅读 2019-02-21 10:16:53
    关于模态框的写法: 在bootstrap的官方文档就有模态框的写法。bootstrap真心好用也很方便! 下面粘出来我的代码 首先得连接好bootstrap的插件,在html页面上连接上这两个包 之后就是代码部分: 给按钮绑定了...
  • bootstrap模态框的详细用法

    万次阅读 2017-10-11 10:21:14
    本文介绍了bootstrap模态框的用法,在文章中我尽量将这一功能说明详细,同时我忽略了部分大部分情况不会使用的属性,也插入一些个人在实际工作中的观点,本文的目标是在你看完本文以后能够较为熟练的使用模态框这...
  • 我想实现的功能是,点击删除按钮,弹出模态框,显示删除行的具体内容,点击保存则提 交该项id至服务器,用bootstrap应该如何实现?
  • bootstrap模态框

    热门讨论 2017-12-18 13:44:45
     最近在项目中jsp使用的是bootstrap,弹出框要设置成自带遮罩的模态框,所以就在网站上找到了bootstrap模态框制作方法。记录在这里  模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的...
  • bootstrap模态框居中

    2016-10-26 13:53:38
    方案一 重写CSS 打开引入的boostrap.css(或boostrap.min.css)文件,找到.modal、.modal-dialog样式,在样式内追加如下代码 .../*模态框居中*/ .modal { display: table; height: 100%; margin: 0 au
  • bootstrap模态框里面使用ueditor

    千次阅读 2015-08-04 16:03:10
    bootstrap模态框里面使用ueditor
  • Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 如果您想要单独...
  • bootstrap模态框实现拖拽

    千次阅读 2016-12-14 08:59:09
    bootstrap modal模态框实现拖拽
  • 模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 本文实现的是使用模态框实现简单的增删改查的功能。主要...
  • 在开发中给button一个点击事件通过方法中的$('#id').modal('show')方式打开模态框,发现打开后模态框显示一下又消失了。 二:解决方法 经过查询大概有下面几种方式,我的问题相对好解决采用的是第4个方法解决 1、...
  • bootstrap 模态框中的input标签在某些情况下会无法获取焦点。 最终解决方法:去除模态框的 tabindex="-1" 属性即可 转载于:https://www.cnblogs.com/feigao/p/5923648.html...
  • bootstrap实现多模态框的方法

    万次阅读 2017-05-13 22:26:39
    本文描述了bootstrap模态框用来做多模态框的问题,解决并实现了bootstrap多模态框。
  • 今天做页面的时候,用模态框遇到的问题: 由于angular不同的部分有不同的controller ,所以跳转的时候如果还有其它动作,一定要注意操作的先后顺序。 比如这个模态框,如果没有外面这一层代码,模态框的遮罩层就...
  • Bootstrap模态框(Modal) 通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle=”modal”,同时设置 data-target=”#identifier” 或 href=”#identifier” 来指定要切换的特定的模态框(带...
  • BootStrap模态框使用

    千次阅读 2017-12-12 17:01:54
    各位大家好这是第一次写自己在学习BootStrap中的一些心得的,和总结。初次发博不好地方大家可以留言评论,博主一定多多改进。创建模态框(Modal) <!-- 按钮触发模态框 --> 开始演示模态框</button>
  • 弹出框(bootStrap模态框、bootbox、dbailog) 最近这几天项目里要用 模态框 ,我找了好多,开始我们项目用的是dbailog的提示框,在我想使用bootstrap的模态框时,两者的js发生了冲突,出现闪退的情况。最后决定把...
1 2 3 4 5 ... 20
收藏数 2,253
精华内容 901
关键字:

bootstrap 模态框显示文本内容