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

WBOY

Libérer： 2016-05-16 16:47:47

original

1197 Les gens l'ont consulté

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 -->

复制代码代码如下 : $(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;} 

 
效果如下图 