JQuery彈出層範例可自訂_jquery

1.創建一個jsp頁面，內容如下，js和css根據自己的實際情況而定

複製程式碼 程式碼如下:

pageEncoding="UTF-8"%>

使用者管理

新增

,

新增

姓名： td>	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'"> *
帳號：	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、公用的兩個有彈出層和JQuery彈出層範例可自訂_jquery層的方法

複製程式碼 程式碼如下:

//彈出層
function 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()/
target .css({"top":top "px"});
$(window).scroll(function(){
var top=$(document).scrollTop() $(視窗). height( )/2;
target.css({"top":top "px"});
}
target.css({"margin- top":-parseInt(targetHeight/2) "px ","margin-left":-parseInt(targetWidth/2) "px"});
target.show();

});
}
//隱藏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","個彈出")closeLayer("JQuery彈出層範例可自訂_jquery","彈出") });

//我們點擊新增或修改按鈕後使目前操作的div隱藏
//closeAdd("Popup");
function closeAdd(targetClass){
$("." targetClass).hide();
$("#spm").hide();
}


4、css樣式




複製程式碼

代碼如下：

複製程式碼程式碼如下： html {min-height: 100%;position:relative;overflow:hidden;} body {background-color: #FFF;font: 12px 微軟雅黑, Arial, sans-serif;margin: 0;}

h1 { 字體大小：12px; 字體大小：繼承; 字體粗細：正常;}

a { 文字裝飾：無;}
a:hover { 文字裝飾：無;}
.clear {溢出：隱藏；清除：兩者；}
#right {margin-left: 190px;min-height: 100%;padding: 0;}
.right_top {高度： 40像素；背景背景顏色：#f5f5f5；顏色：#666666；未知底部：1像素實心#e5e5e5；行高：40像素；左內邊距：50像素；位置：相對；z索引：1；}
。 #2b7dbc;}
.right_nav {邊距：0 30px；高度：37px；背景顏色：#438eb9；行高：37px；位置：相對；邊距頂部：15px；}
.right_nav h1 {字體：相對；邊距頂部：15px；}
.right_nav h1 {字體大小：18px;顏色：#ffffff;padding-left：20px;}
.but_tj {寬度：68px；高度：27px；顯示：塊；位置：絕對；頂部：7px；右: 30px;背景: url( but_JG.png) no-repeat; 文字對齊: center;行高: 27px; 字型大小: 14px; 顏色: #FFF;}
.but_tj:hover { 背景: url (but_JG1.png) 不重複; }
.pind20 {padding-left: 20px;}
/*Popup*/
.Popup { 寬度: 770px;高度: 500px;位置:絕對;左側: 50%;頂部: 50%;上左左側邊距: -400px;填滿: 0 15px;頂部邊距: -250px;背景顏色: #FFF;自己: 3px 實線#006caa;z-index: 999;}
.Popup_top {高度：40px ;行高：40px;未知底部：1pxsolid #cccccc;}
.Popup_top h1 {浮動：左;字體大小：14px;}
.JQuery彈出層範例可自訂_jquery{浮動：右;字體系列: Arial, Helvetica, sans -serif ;margin-right: 10px;margin-top: 10px;}
.Popup_cen {padding-top: 10px;寬度: 100%;高度: 440px;溢出:自動;}
.Popup_audit {padding-頂部: 10px; 寬度: 100%; 高度: 440px;}
.overlay {位置: 固定;z-index: 990; 寬度: 100%;高度: 100 %; 頂部: 0;左: 0;過濾器: alpha (不透明度= 60);不透明度: 0.6;補救:;隱藏背景顏色: #000;}
/*BD_tab*/
.BD_tab {寬度: 500px;邊距: 0 auto;}
.BD_tab td {padding-top: 12px;}
.input220,.input220L,.input220Lg { 寬度: 220px; 高度: 28px; 對稱: 1pxsolid #d3d3d3; padding-left: 5px;line-height: 28px;font-family: "微軟雅黑";color: #000;}
.input220L {border: 1pxsolid #377bcb;background-color: #d5e8ff; >.input220Lg {border: 1pxsolid #7fb1eb;background-color: #d8e6f7;}
.input220 {border: 1pxsolid #d3d3d3;}