Home > Web Front-end > JS Tutorial > Pop-up box plug-in based on jQuery_jquery

Pop-up box plug-in based on jQuery_jquery

WBOY
Release: 2016-05-16 17:55:01
Original
1039 people have browsed it

The html is as follows:

Copy code The code is as follows:








DEMO




Name:





Password:





Email:











Name:

< br />


Password:














The js plug-in is as follows:
Copy code The code is as follows:

/*
* jquery.popwin.js 1.0
* Copyright (c) gaoyubao
* Date: 2012-01-12
* 1. Click the button to pop up your For the content you want to pop up, just set the id or class
2. When the browser window is reduced, the pop-up box will always be centered
3. Press ESC to close the window
*/
(function($) {
var css='';
$("head").append(css);
$.fn.popwin= function( options) {
var settings={
element: "element", //Which pop-up box can be id or class
width: 400,
height: 200,
title: "title" //The title of the pop-up box
}
var s=$.extend(settings,options);
var htmlCode=$(s.element).html();
$(s.element).remove();
$.a={
//Set the width and height of the background
setBg: function() {
var bh=$("body" ).height(),wh=$(window).height(),ww=$(window).width();
if(bh>wh) {
wh=bh;
}
$("#bg").css({
width: ww,
height: wh
});
},
//Set the pop-up box to center
setFlag : function() {
var l=(document.documentElement.clientWidth-s.width)/2 "px",
t=(document.documentElement.clientHeight-s.height)/2 "px";
$("#flagBox").css({
width: s.width,
height: s.height,
left: l,
top: t
}) ;
},
//Close the pop-up box
setClose: function() {
$("#container").remove();
}
};
var html='
< ;a href="javascript:void(0)">close

' s.title '

' htmlCode '
';
$(window).resize(function() {//Adjust the size of the window
$.a.setFlag();
});
return this.each(function() {
$(this).bind("click",function(){
$("body").append(html);
$("#titleBox a").click(function() {
$.a.setClose();
});
$.a.setBg();
$ .a.setFlag();
});
$(document).keydown(function(event) {
if(event.which=="27") {
$.a. setClose();
}
});
});
};
})(jQuery)
function isEmail(str) {
var reg = /^ ([a-zA-Z0-9_-]) @ ([a-zA-Z0-9_-]) (.[a-zA-Z0-9_-])/;
if(reg.exec(str )) {
return false;
}else {
return true;
}
}
function check() {
var flag=true;
$( "#nameErr").html('');
$("#passwordErr").html('');
$("#emailErr").html('');
var username=$("#username").val();
var password=$("#password").val();
var email=$("#email").val();
if(username=="" || username==null) {
$("#nameErr").html("Name cannot be empty");
flag=false;
}
if(password=="") {
$("#passwordErr").html("Password cannot be empty");
flag=false;
}
if(email ==="") {
$("#emailErr").html("Email cannot be empty");
flag=false;
}else if(isEmail(email)) {
$("#emailErr").html("Email format error");
flag=false;
}
return flag;
}
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