如何實現一個自定義的彈出框
阿新 • • 發佈:2019-01-22
.ewb-mesgbox { position: relative; width: 500px; background-color: #fff; } .ewb-msgbox-hd { height: 60px; line-height: 60px; text-align: center; font-size: 20px; background-color: #f5f5f5; } .ewb-colse { display: block; width: 14px; height: 14px; font-size: 14px; color: #999; position: absolute; right: 15px; top: 15px; z-index: 9999; cursor: pointer; background: url(../images/close_btn.png) center center no-repeat; } .ewb-msgbox-notice { height: 140px; line-height: 140px; font-size: 16px; color: #104382; text-align: center; } .ewb-msgbox-bd2 { padding: 34px 0; } .ewb-msgbox-notice2 { font-size: 16px; color: #104382; text-align: center; line-height: 24px; }
然後建立一個在html檔案中去新增一個模板:
<script type="text/x-template" id="msgbox"> <div class="ewb-mesgbox"> <span class="ewb-colse"></span> <div class="ewb-msgbox-hd">提示</div> <div class="ewb-msgbox-bd"> <p class="ewb-msgbox-notice">對不起,........!</p> </div> </div> </script>
我們在頁面中引入layer外掛
open($('#msgbox'));
就可以彈出比較好看的框:
希望對你有所幫助