2019獨角獸企業重金招聘Python工程師標準>>>

?HTML

<div class="modal-box j-modal-box"><div class="modal-wrap"><div class="close-btn" title="關閉"><i class="icon icon-close2 j-close-modal"></i></div><div class="modal-container"><div class="modal-header"><h3 class="modal-title">立即預約</h3><p>填寫您的資料，馬上聯系您~</p></div><div class="modal-body"><form class="form-container"><div class="form-group name"><input class="form-control" type="name" placeholder="稱謂"></div><div class="form-group tel"><input class="form-control" type="tel" placeholder="手機號碼"></div><div class="submit-btn"><input type="button" class="btn j-next-modal" value="確認提交" title="確認提交"><i class="icon icon-arrow8"></i></div><div class="error-tips">*請輸入您的手機號碼</div></form></div><div class="modal-footer"><div class="text-center"><img src="resources/images/custom-avator.png" alt="慧招網客服"></div></div></div></div></div>

?

css

.modal-box{display: none; position: fixed; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; z-index: 1000; background-color: rgba(0,0,0,.5);} .modal-box .modal-wrap,.modal-wrap{position: fixed; left: 50%; top: 50%; z-index: 210; width: 460px; margin-top: -300px; margin-left: -230px; background: #fff;} .modal-box .modal-container,.modal-container{position: relative; border: 0; padding-top: 35px; background: #fff; overflow: hidden; box-shadow: none;} .modal-box .modal-header,.modal-header{text-align: center; margin-bottom: 30px; padding: 0; border-bottom: none;} .modal-box .modal-header h3,.modal-header h3{margin-bottom: 15px; color: #2579ef; font-size: 24px;} .modal-box .close-btn,.close-btn{display: block; cursor: pointer; position: absolute; right: 15px; top: 15px; background: none; border: none; outline: none; z-index: 10001;} .modal-box input,.right-wrap input{padding: 0 20px; width: 100%; height: 40px; line-height: 40px; font-size: 16px;} .modal-box .form-group{margin-bottom: 10px;} .modal-box .tel,.modal-box .name{padding: 0 80px;} .modal-box .submit-btn,.error-tips,.submit-btn{position: relative; padding: 0 85px;} .modal-box .submit-btn .icon-arrow8,.error-tips .icon-arrow8,.submit-btn .icon-arrow8{position: absolute; left: 250px; top: 26px;} .modal-box .submit-btn input,.submit-btn .know,.submit-btn input,.right-wrap .submit-btn input{width: 100%; margin-top: 10px; padding: 0; height: 40px; line-height: 40px; font-size: 16px; color: #fff; text-align: center; background: #2579ef; opacity: 1; cursor: pointer;} .modal-box .submit-btn a i,.right-wrap .submit-btn a i{margin-left: 10px;} .modal-box .modal-footer{text-align: center; border-top: none;} .modal-footer{position: relative;} .modal-footer .telephone{margin: 10px 85px 30px; line-height: 30px;} .modal-footer .telephone label{float: left;} .modal-footer .telephone strong{float: left; font-size: 28px; color: #2579ef;}

?

JS部分

//彈窗所有操作 function jModal(){$(".j-popup-trigger").on("click", function(event){event.preventDefault();$(".j-modal-box").fadeIn("fast");});$(".j-modal-box").on("click", function(event){if($(event.target).is(".j-close-modal") || $(event.target).is(".j-modal-box")){event.preventDefault();$(this).fadeOut("fast");}});//鍵盤ESC關閉彈窗$(document).keyup(function(event){if(event.which == "27"){$(".j-modal-box").fadeOut("fast");$(".j-last-modal").fadeOut("fast");}}); } 最重要的是使用事件委托： 即事件冒泡和事件源對象進行處理 event.target以及阻止默認事件

轉載于:https://my.oschina.net/parchments/blog/655812

總結

以上是生活随笔為你收集整理的jq弹出层的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。