Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 bootstrap-modal使用方法

bootstrap-modal使用方法

发布时间:2020-05-15   编辑:www.jquerycn.cn
jquery中文网为您提供bootstrap-modal使用方法等资源,欢迎您收藏本站,我们将为您提供最新的bootstrap-modal使用方法资源
本文章来给各位同学介绍关于bootstrap-modal使用方法,希望此方法对各位有所帮助。

一般在两种html元素上调用,按钮和超链接。

 代码如下 复制代码

<input type="button" data-toggle="modal" data-target="#tree" class="btn" value="点我选择">
<a data-toggle="modal" href="#regulation">查看工号规则</a>

标准的modal层:

 代码如下 复制代码

    <div class="modal" id="myModal">
    <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>对话框标题</h3>
    </div>
    <div class="modal-body">
    <p>对话框内容</p>
    </div>
    <div class="modal-footer">
    <a href="#" class="btn">关闭</a>
    <a href="#" class="btn btn-primary">保存更新</a>
    </div>
    </div>

其中任何一块都可以去掉,关闭层,需要添加data-dismiss=”modal”,例如footer关闭按钮,添加这句,就生效了

您可能感兴趣的文章:
日期选择插件 Datepicker for Bootstrap
Laravel 5.1使用 Laravel Elixir 集成安装 Bootstrap
类Facebook风格的对话框 FBModal
类Facebook风格的对话框 FBModal
jquery封装的对话框简单实现
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
基于jquery的弹窗插件 weebox
使用jquery读取html5 localstorage的值的方法
jQuery对话框 jQuery Modal Dialog
Jquery读取URL参数小例子

[关闭]