L'exemple de couche contextuelle JQuery peut être personnalisé_jquery

1. Créez une page jsp avec le contenu suivant. Les js et css sont déterminés en fonction de votre situation réelle

Copiez le codeLe le code est le suivant :

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
html>
< ;head>
/title>






="right">

Gestion des utilisateurs

Ajouter

< ;!-- will La page située sous le calque contextuel devient inutilisable et translucide -->

,';
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(); ("#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"});
}
target.css({"margin- 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属性值

popupCouche ("but_tj","Popup");
closeLayer("Fermer","Popup"
});

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


4、css样式

复制代码 代码如下: html {hauteur min : 100 %;position : relative;débordement : caché;}

corps {couleur de fond : #FFF;police : 12px 微软雅黑, Arial, sans-serif;marge : 0;}

h1 {font-size : 12px;font-size : hériter;font-weight : normal;}
a {text-decoration : aucun;}
a:hover {text-decoration : aucun;}
.clear {overflow : caché;clear : les deux ;}
#right {margin-left : 190px;min-height : 100%;padding : 0;}
.right_top {hauteur : 40px;couleur d'arrière-plan: #f5f5f5;couleur: #666666;bordure inférieure: 1px solide #e5e5e5;hauteur de ligne: 40px;rembourrage gauche: 50px;position: relative;index z: 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 {taille de police : 18px;couleur : #ffffff;padding-left : 20px;}
.but_tj {largeur : 68px;hauteur : 27px;affichage : bloc;position : absolue;haut : 7px;droite : 30px;arrière-plan : 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 {largeur : 770px;hauteur : 500px;position : absolue;gauche : 50 %;haut : 50 %;marge gauche : -400 px ;remplissage : 0 15 px ;marge supérieure : -250 px ;couleur d'arrière-plan : #FFF ;bordure : 3 px solide #006caa ;z-index : 999 ;}
.Popup_top {hauteur : 40px;hauteur de ligne : 40px;border-bottom : 1px solid #cccccc;}
.Popup_top h1 {float : gauche ; taille de police : 14px ;}
.Fermer {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;largeur : 100%;hauteur : 440px;}
.overlay {position : fixe;z-index : 990;largeur : 100 %;hauteur : 100 %;haut : 0;gauche : 0;filtre : alpha(opacité = 60);opacité : 0,6;débordement : caché;couleur d'arrière-plan : #000;}
/*BD_tab*/
.BD_tab {width : 500px;marge : 0 auto;}
.BD_tab td {padding-top : 12px;}
.input220,.input220L,.input220Lg {largeur : 220px;hauteur : 28px;bordure : 1px solide #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;}


效果如下图