Maison >interface Web >js tutoriel >L'exemple de couche contextuelle JQuery peut être personnalisé_jquery

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

WBOY
WBOYoriginal
2016-05-16 16:47:471204parcourir

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


效果如下图
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn