jQuery彈出層插件popShow用法示例

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

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供林周網(wǎng)站建設(shè)、林周做網(wǎng)站、林周網(wǎng)站設(shè)計、林周網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、林周企業(yè)網(wǎng)站模板建站服務(wù)，10多年林周做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

popShow彈出層

jQuery彈出層插件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" >
  <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 });
//打開彈出層

參數(shù)說明：

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

(2) 關(guān)閉彈出層

popHide(); //關(guān)閉彈出層

附件

附件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="點擊關(guān)閉"></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：關(guān)閉按鈕圖標(biāo)(swinclose.gif)

jQuery彈出層插件popShow用法示例

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

當(dāng)前題目：jQuery彈出層插件popShow用法示例
當(dāng)前網(wǎng)址：http://bm7419.com/article42/gejdec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、品牌網(wǎng)站建設(shè)、網(wǎng)站改版、關(guān)鍵詞優(yōu)化、網(wǎng)站收錄、網(wǎng)站維護

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化