>웹 프론트엔드 >JS 튜토리얼 >jQuery_jquery 기반 팝업 상자 플러그인

jQuery_jquery 기반 팝업 상자 플러그인

WBOY
WBOY원래의
2016-05-16 17:55:011029검색

HTML은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.








DEMO ;



이름:




비밀번호:





이메일:











이름:

< br />











<버튼 값 ="Login" id= "btn02">Login



js 플러그인은 다음과 같습니다.



코드 복사
코드는 다음과 같습니다.

/*
* jquery.popwin.js 1.0
* Copyright (c) gaoyubao
* 날짜: 2012-01-12
* 1. 버튼을 클릭하면 팝업이 뜹니다. 팝업하고 싶은 콘텐츠는 ID나 클래스만 설정하세요
2. 브라우저 창이 축소되면 팝업 상자는 항상 중앙에 위치합니다
3. ESC를 눌러 창을 닫습니다
*/
(function($) {
var css='';
$("head").append(css); fn.popwin= function( options) {
var settings={
element: "element", //어떤 팝업 상자가 id 또는 클래스일 수 있는지
width: 400,
height: 200 ,
title: "title" //팝업 상자 제목
}
var s=$.extend(settings,options)
var htmlCode=$(s.element) .html();
$(s.element).remove();
$.a={
//배경의 너비와 높이 설정
setBg: function() {
var bh=$("body" ).height(),wh=$(window).height(),ww=$(window).width()
if(bh>wh) {
wh=bh
}
$("#bg").css({
너비: ww,
높이: wh
},
//팝업 상자를 가운데로 설정
setFlag : function() {
var l=(document.documentElement.clientWidth-s.width)/2 "px",
t=(document. documentElement.clientHeight-s.height)/2 "px";
$("#flagBox").css({
너비: s.width,
높이: s.height,
왼쪽 : l,
top: t
}) ;
},
//팝업 상자 닫기
setClose: function() {
$("#container") .remove();
}
};
var html='
' htmlCode '
'
$(window).resize(function() {/ /창 크기 조정
$.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").val()
var 비밀번호=$("#password").val() ;
var email=$("#email").val();
if(username=="" || 사용자 이름==null) {
$("#nameErr").html( "이름은 비워둘 수 없습니다.");
flag=false;
}
if(password=="") {
$("#passwordErr").html("비밀번호는 비워둘 수 없습니다." );
flag=false;
}
if(email ==="") {
$("#emailErr").html("이메일은 비워둘 수 없습니다."); flag=false;
}else if(isEmail(email)) {
$("#emailErr").html("이메일 형식 오류")
flag=false; >반환 플래그
}

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.