BBS项目模态框的使用

BBS项目模态框的使用

技术点归纳

• 模态框的三种使用方式
• 模态框的hide和 show属性
• sweetalert警告框的使用

模态框的三种使用方式

元素绑定模态框的id,点击元素，打开模态框

<a data-toggle="regmodal" data-target="#regModal">注册</a>

给a标签或者btn按钮添加class，并绑定js点击事件

<a href="#" class="register_model">注册</a>

//注册模态框的弹出
        $('.register_model').on('click', function () {
            $('#regModal').modal('show') //显示模态框
        });

注册模态框代码

<!-- regModal -->
               <div class="modal fade" id="regModal" tabindex="-1" role="dialog" aria-labelledby="regModalLabel">
                   <div class="modal-dialog" role="document">
                       <div class="modal-content">
                           <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                       aria-hidden="true">&times;</span></button>
                               <h3 class="modal-title " id="regModalLabel">会员注册
                                   <span class="glyphicon glyphicon-user" style="color: green"></span>
                               </h3>
                           </div>
                           <div class="modal-body">
                               {% include 'register.html' with register_form=register_form %}
                           </div>
                           <div class="modal-footer">
                               <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                               <button type="button" class="btn btn-primary btn-sm" id="id_register">注册</button>
                           </div>
                       </div>
                   </div>
               </div>

通过include导入注册模板( with进行传参)

{% include 'register.html' with register_form=register_form %}

模态框的hide和show 属性

模态框之间的切换

$("#direct-register").click(function(){
		$("#loginModal").modal("hide"); //隐藏登录模态框
		$("#loginModal").on("hidden.bs.modal",function(){ 
		//调用监听事件hidden.bs.modal，等待登录模特框完全退出后，再展示注册模态框
			$("#registerModal").modal("show"); //展示注册模态框
			$("#loginModal").off().on("hidden","hidden.bs.modal");//监听事件用完了要记得关闭
		})
	})

sweetalert警告框的使用

						$('#logModal').modal('hide');
                        swal({
                                title: 'login success', //标题
                                type: 'success',     //类型
                                confirmButtonText: 'ok', //按钮文本
                                closeOnConfirm: false, //警告框弹出，是否立即关闭按钮
                            },
                            function () {
                                if (args.url) {
                                    window.location.href = args.url; //跳转到原来的url
                                } else {
                                    window.location.href = '/home/'  //跳转到home
                                }
                            }
                        );