bootstrap中的modals

依然那么楞

于 2013-11-20 15:47:21 发布

阅读量896

点赞数

CC 4.0 BY-SA版权

文章标签： bootstrap modal modals

本文链接：https://blog.youkuaiyun.com/ling811/article/details/16845275

modals的静态试验：

<div class="modal">
    	<div class="modal-header">
        	<button class="close" data-dismiss="modal" aria-hidden="true" title="关闭">×</button><h3>modal头部</h3>
        </div>
        <div class="modal-body">
        	<p>肚纸~~~</p>
        </div>
        <div class="modal-footer">
        	<a class="btn">关闭</a>
            <a class="btn btn-primary" >保存退出</a>
        </div>
    </div>

效果图：

modals的动态试验（弹窗）：

<a href="#mymodal" role="button" class="btn" data-toggle="modal">试验按钮</a>

	<div id="mymodal" class="modal hide fade" aria-hidden="true">
    	<div class="modal-header">
        	<button class="close" data-dismiss="modal" aria-hidden="true" title="关闭">×</button><h3>modal头部</h3>
        </div>
        <div class="modal-body">
        	<p>肚纸~~~</p>
        </div>
        <div class="modal-footer">
        	<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
            <button class="btn btn-primary" >保存退出</button>
        </div>
    </div>

效果图：

未弹窗前的按钮：