Home > Web Front-end > JS Tutorial > jquery popup layer implementation code_jquery

jquery popup layer implementation code_jquery

WBOY
Release: 2016-05-16 18:42:54
Original
1241 people have browsed it

After analysis and online reference, I finally got it~~
jQuery plug-in code:

Copy code The code is as follows:

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 code:
Copy code The code is as follows:








All
Confidence



css style:
Copy code The code is as follows:

/* 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 code:
Copy code The code is as follows:

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

Click the text box and a new layer will pop up directly below it. When you click again, the layer will be hidden.
In the future, I will continue to improve this plug-in~~~ O(∩_∩)O...
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template