Ein Beispiel für eine JQuery-Popup-Ebene kann „customized_jquery' sein

1. Erstellen Sie eine JSP-Seite mit dem folgenden Inhalt. Die js und css werden entsprechend Ihrer tatsächlichen Situation bestimmt

Kopieren Sie den Code Die Der Code lautet wie folgt:

pageEncoding="UTF-8"%>
html>
< ;head>
/title>



="right">

Benutzerverwaltung

but_tj">Add

< ;!-- wird Die Seite unter der Popup-Ebene wird funktionsunfähig und durchscheinend --> ->

Add

= "Close" src="close.png" />

= "100%" border="0" cellpadding="0" class="BD_tab">
Name:
onfocus="this.className = 'input220L';this.onmouseout=''"
onblur="this.className='input220';this.onmouseout=function(){this.className='input220'};"
onmousemove=" this .className='input220Lg'"
onmouseout="this.className='input220'"> *


Nickname: = "text" class="input220"
onfocus="this.className='input220L';this.onmouseout=''"
onblur="this.className='input220';this.onmouseout=function( ) {this.className='input220'};"
onmousemove="this.className='input220Lg'"
onmouseout="this.className='input220'">
:
onfocus="this.className='input220L';this . onmouseout=''"
onblur="this.className='input220';this.onmouseout=function(){this.className='input220'};"
onmousemove="this.className='input220Lg ' "
onmouseout="this.className='input220'"> *


>
2. Zwei gängige Methoden mit Popup-Ebene und Abschlussebene




Code kopieren


Der Code lautet wie folgt:

//Popup-Ebene
Funktion isIE(num){
var num = num || "",
tester = document.createElement('div');
tester.innerHTML = '';
return !!tester.getElementsByTagName('i')[0];
}
function popupLayer(objClass,targetClass){
$("." objClass).click(function(){
$("#spm").show();
var target=$("." targetClass);
var targetWidth=target.outerWidth();
var targetHeight=target.outerHeight();
if(isIE(6)){
$ ("#spm").hide();
//$("select").hide();
var top=$(document).scrollTop() $(window).height()/ 2;
target.css({"top":top "px"});
$(window).scroll(function(){
var top=$(document).scrollTop() $ (window).height()/2;
target.css({"top":top "px"}); top":-parseInt(targetHeight/2) "px",margin-left":-parseInt(targetWidth/2) "px"});
target.show();
return false;

});

}
//隐藏div的操作
function closeLayer(objClass,targetClass)
{
$("." objClass).click(function(){
$(this).parents("." targetClass).hide();
$("#spm").hide(

});
}


3、1中调用3中js实现效果的js代码

复制代码 代码如下: $(function(){

//第一个参数是按钮的class属性值，第二个是被隐藏的div属性值

popupLayer ("but_tj", "Popup");
closeLayer("Close", "Popup"});

//我们通过点击添加或修改按钮后使当前操作的div隐藏
//closeAdd("Popup");
function closeAdd(targetClass){
$("." targetClass).hide();
$("#spm").hide();
}


4、css样式

复制代码

代码如下: html {min-height: 100%;position: relative;overflow: versteckt;} body {background-color: #FFF;font: 12px 微软雅黑, Arial, sans-serif;margin: 0;}

h1 {font-size: 12px;font-size: inherit;font-weight: normal;}

a {text-decoration: none;}
a:hover {text-decoration: keine;}
.clear {overflow: versteckt;clear: Both;}
#right {margin-left: 190px;min-height: 100%;padding: 0;}
.right_top {height: 40px;background-color: #f5f5f5;color: #666666;border-bottom: 1px solid #e5e5e5;line-height: 40px;padding-left: 50px;position: relative;z-index: 1;}
. right_top a {color: #2b7dbc;}
.right_nav {margin: 0 30px;height: 37px;background-color: #438eb9;line-height: 37px;position: relative;margin-top: 15px;}
.right_nav h1 {font-size: 18px;color: #ffffff;padding-left: 20px;}
.but_tj {width: 68px;height: 27px;display: block;position: absolute;top: 7px;right : 30px;Hintergrund: url(but_JG.png) no-repeat;text-align: center;line-height: 27px;font-size: 14px;color: #FFF;}
.but_tj:hover {background: url (but_JG1.png) no-repeat;}
.pind20 {padding-left: 20px;}
/*Popup*/
.Popup {width: 770px;height: 500px;position: absolute;left : 50%;oben: 50%;Rand links: -400px;Padding: 0 15px;Rand oben: -250px;Hintergrundfarbe: #FFF;Rand: 3px einfarbig #006caa;z-index: 999;}
.Popup_top {height: 40px;line-height: 40px;border-bottom: 1px solid #cccccc;}
.Popup_top h1 {float: left;font-size: 14px;}
.Close {float : right;font-family: Arial, Helvetica, sans-serif;margin-right: 10px;margin-top: 10px;}
.Popup_cen {padding-top: 10px;width: 100%;height: 440px;overflow : auto;}
.Popup_audit {padding-top: 10px;width: 100%;height: 440px;}
.overlay {position: behoben;z-index: 990;width: 100%;height: 100 %;top: 0;left: 0;filter: alpha(opacity = 60);opacity: 0.6;overflow: versteckt;background-color: #000;}
/*BD_tab*/
.BD_tab {width : 500px;margin: 0 auto;}
.BD_tab td {padding-top: 12px;}
.input220,.input220L,.input220Lg {width: 220px;height: 28px;border: 1px solid #d3d3d3; padding-left: 5px;line-height: 28px;font-family: "微软雅黑";color: #000;}
.input220L {border: 1px solid #377bcb;background-color: #d5e8ff;}
.input220Lg {border: 1px solid #7fb1eb;background-color: #d8e6f7;}
.input220 {border: 1px solid #d3d3d3;}


效果如下图