1. Erstellen Sie eine JSP-Seite mit dem folgenden Inhalt. Die js und css werden entsprechend Ihrer tatsächlichen Situation bestimmt
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
html>
< ;head>
/title>
="right">
Benutzerverwaltung but_tj">Add
< ;!-- wird Die Seite unter der Popup-Ebene wird funktionsunfähig und durchscheinend --> ->
= "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'"> * < / tr> 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代码
//第一个参数是按钮的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;} 效果如下图
Stellungnahme: Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn