jQuery彈出層插件popShow用法示例

2019-11-19 17:48:04

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery彈出層插件popShow用法。分享給大家供大家參考，具體如下：

popShow彈出層

圖1.1 彈出層效果

1、引入JS和CSS文件

<link href="popShow.css" rel="stylesheet" type="text/css" /><script src="/js/common/jquery.min.js" type="text/javascript"></script><script src="popShow.js" type="text/javascript"></script>

注意：這里需要引入JQuery庫文件。

2、編寫HTML代碼

<div id="swinLogin" style="display:none;">  <div class="pWrap">    <table class="g_form">      <tr>        <th class="g-form-label"><span class="g-star">*</span>用戶名</th>        <td><input id="txtUserName" type="text" /></td>      </tr>      <tr>        <th><span class="g-star">*</span>密碼</th>        <td><input id="txtPsw" type="password" /></td>      </tr>      <tr>        <th></th>        <td><input type="button" value="登錄" /></td>      </tr>    </table>  </div></div>

3、popShow的使用

(1) 打開彈出層

popShow({ title: "用戶登錄", ele: "#swinLogin", width: 468 });//打開彈出層

參數說明：

title: '用戶登錄', //標題
ele: '#divID', //目標id，必填
html: '<div><p>提交成功</p></div>', //支持html代碼，若填寫此項，ele可為空
width: 700, //非必填
hide: '#closeswin' //關閉按鈕id，非必填

(2) 關閉彈出層

popHide(); //關閉彈出層

附件

附件1：popShow.js

function popShow(obt) {  var wp = $('<div id=/"g-popwin/"></div>').appendTo('body'),    ms = $('<div class=/"g-popwin-mask/"><iframe frameborder=/"0/" scrolling=/"no/"></iframe></div>').appendTo(wp),    tb = $('<table class=/"g-popwin-box/"></table>').appendTo(wp),    tr = $('<tr></tr>').appendTo(tb),    td = $('<td></td>').appendTo(tr),    bx = $('<div class=/"g_popwin/" style=/"margin:0 auto; width:700px;/"></div>').appendTo(td),    ba = $('<div class=/"tit/"></div>').appendTo(bx),    rb = $('<b class="g-f-r"></b>').appendTo(ba),    hd = $('<a class="close g-f-r" title="點擊關閉"></a>').appendTo(ba),    st = $('<strong></strong>').appendTo(ba),    cn = $('<div class=/"con/"></div>').appendTo(bx),    ss;  if (obt.ele) {    ss = $(obt.ele).show().appendTo(cn)  } else if (obt.html) {    cn.append(obt.html)  }  if (obt.width) {    bx.width(obt.width)  }  if (obt.height) {    bx.height(obt.height)  }  if (obt.title) {    st.text(obt.title)  }  else { ba.hide() }  hd.add(obt.hide || '#swin_hide').click(function() {    popHide();  });  window.popHide = function() {    if (obt.ele) {      ss.hide().appendTo('body')    }    wp.remove()  };}

附件2：popShow.css

#g-popwin, .g-popwin-mask, .g-popwin-mask iframe, .g-popwin-box {  height: 100%;  width: 100%;}.g-popwin-mask, .g-popwin-box {  left: 0;  position: fixed;  top: 0;  z-index: 100;}.g-popwin-mask {  background: none repeat scroll 0 0 #000000;  opacity: 0.3;}.g-popwin-mask iframe {  opacity: 0;}.g_popwin {  background-color: #FFFFFF;  border: 1px solid #C6C6C6;}.g_popwin .tit .close {  background: url("/images/swinclose.gif") no-repeat scroll 0 0 transparent;  cursor: pointer;  height: 14px;  margin-top: 8px;  width: 14px;}.g_popwin .tit b {  display: block;  height: 30px;  width: 10px;}.g_popwin .tit{  background: none no-repeat scroll 0 0 #f2f2f2;  border-bottom: 1px solid #C6C6C6;  height: 30px;  line-height: 30px;  overflow: hidden;  padding: 0 10px;  font: 12px/1.5em Arial,Tahoma;  color: #111111;  line-height:30px;}.g_popwin .tit strong {  display: block;  height: 27px;  width: 220px;}.g-f-r{float:right;}

附件3：關閉按鈕圖標(swinclose.gif)