經(jīng)過分析，網(wǎng)上的參考，終于搞定了~~

jQuery插件代碼：

jQuery.fn.selectItem = function(targetId) {

var _seft = this;

var targetId = $(targetId);

this.toggle(

function() {

var A_top = $(this).offset().top + $(this).outerHeight(true); // 1

var A_left = $(this).offset().left;

targetId.bgiframe();

targetId.show().css({ "position": "absolute", "top": A_top + "px", "left": A_left + "px" });

}

, function() {

targetId.hide();

}

);

targetId.find("#selectItemClose").click(function() {

targetId.hide();

});

targetId.find("#selectSub :checkbox").click(function() {

targetId.find(":checkbox").attr("checked", false);

$(this).attr("checked", true);

_seft.val($(this).val());

targetId.hide();

});

$(document).click(function(event) {

if (event.target.id != _seft.selector.substring(1)) {

targetId.hide();

}

});

targetId.click(function(e) {

e.stopPropagation();

});

return this;

}

HTML代碼：

All

Confidence

css樣式：

/* pop div begin */

.selectItemcont{padding:8px;}

.selectItemtit{line-height:20px;height:20px;margin:1px;padding-left:12px;}

.bgc_ccc{background:#E88E22;}

.selectItemleft{float:left;margin:0px;padding:0px;font-size:12px;font-weight:bold;color:#fff;}

.selectItemright{float:right;cursor:pointer;color:#fff;}

.selectItemcls{clear:both;font-size:0px;height:0px;overflow:hidden;}

.selectItemhidden{display:none;}

#selectCompetencies

{

display:none;

background:#FFF;

position:absolute;

top:0px;

left:center;

border:1px solid #000;

overflow-x:hidden;

overflow-y:auto;

width:250px;

z-index:1000;

max-height:200px;

}

/* pop div end */

JavaScript代碼：

$("#txtCompetencies").selectItem("#selectCompetencies");

實(shí)現(xiàn)點(diǎn)擊文本框，在其正下方彈出一個(gè)新的層，再次點(diǎn)擊的時(shí)候，隱藏層。

后面的話，我會(huì)把這個(gè)插件繼續(xù)完善的~~~ O(∩_∩)O...

本文原創(chuàng)發(fā)布php中文網(wǎng)，轉(zhuǎn)載請(qǐng)注明出處，感謝您的尊重！

總結(jié)

以上是生活随笔為你收集整理的php jquery实现弹窗,jquery 弹出层实现代码_jquery的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。