首页 > 其他 > 详细

bootstrap学习--模态弹出框modals轮子

时间:2016-02-25 19:38:23      阅读:239      评论:0      收藏:0      [点我收藏+]

1.点击按钮型

<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">(本地文件)
...
<button class="btn btn-primary" type="button">点击我</button>
<div class="modal" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模态弹出窗标题</h4>
            </div>
            <div class="modal-body">
                <p>模态弹出窗主体内容</p>
            </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-dialog -->
</div><!-- /.modal -->

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script>
<script>
  $(function(){
    $(".btn").click(function(){
      $("#mymodal").modal("toggle");
    });
  });
</script>

效果如下:

 

技术分享

 

2.登入注册型

<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
...
<a href="" data-toggle="modal" data-target="#login-modal">登录/注册</a>
...
 <!--bootstrap弹出层-->
    <div class="modal fade" id="login-modal" tabindex="-1" data-backdrop="trun">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                   <button class="close" data-dismiss="modal">&times;</button>
                   <h4>用户登录</h4>

                </div>
                <div class="modal-body">
                  <p>
                                     登入/注册界面
                 </p>
  
                </div>
                <div class="modal-footer">
                   <button class="btn btn-primary">登录</button> 
                </div>
            </div>
        </div>
    </div>
    <script src="lib/jquery-2.1.1.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="lib/holder.js"></script>

    <script type="text/javascript">
        $(function(){
            $(#login-modal).modal({
                show: false,
                
            });
        });
        $(#login-modal).on(show.bs.modal,function(){
            console.log(显示对话框);   
        })
        $(#login-modal).on(shown.bs.modal,function(){
            console.log(对话框已经显示了);
        })

        $(#login-modal).on(hide.bs.modal,function(){
            console.log(隐藏对话框);
        })
        $(#login-modal).on(hidden.bs.modal,function(){
            console.log(对话框已隐藏);
        })
    </script>

技术分享

bootstrap学习--模态弹出框modals轮子

原文:http://www.cnblogs.com/jerry666/p/5217984.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!