关于bootstrap model隐藏问题

百变鹏仔 1个月前 (11-14) #bootstrap

文章标签 bootstrap

bootstrap model隐藏的方法：首先外引boostrap和jquery的文件环境；然后添加一个大的div；最后通过设置“aria-hidden”属性隐藏模态框即可。

本教程操作环境：windows7系统、bootstrap3版，该方法适用于所有品牌电脑。

Modal（模态框）

首先，外引boostrap和Jquery的文件环境：

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

一般是按钮或者链接触发modal

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button><!-- 模态框（Modal） -->

首先添加一个大的div, fade:淡入淡出的效果 aria-hidden是为了隐藏模态框

<div><p>然后在modal-content下，插入modal-header,modal-body,modal-footer</p><pre class="brush:php;toolbar:false"><div>            <div>                <button>×</button>                <h4>模态框（Modal）标题</h4>            </div>            <div>在这里添加一些文本</div>            <div>                <button>关闭</button>                <button>提交更改</button>            </div>        </div><!-- /.modal-content -->

×就是X的符号，点击关闭或者x或者点“Ese”都可以退出模态框

如果，你想点击提交更改也可以退出模态框，你可以添加一个onclick事件，在script里添加$("#myModal").modal("hide");如下

<button type="button" class="btn btn-primary" onclick="user_del()" id="user-change">提交更改</button>

 function user_del(){    $("#user").modal('hide');}

文章推荐

关于bootstrap model隐藏问题

Modal（模态框）

学习bootstrap需要什么基础

bootstrap模态框有什么用

bootstrap是什么意思啊

bootstrap是什么时间开源的

bootstrap怎么实现响应式