本篇內(nèi)容主要講解“jQuery怎么實(shí)現(xiàn)彈出窗口”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“jQuery怎么實(shí)現(xiàn)彈出窗口”吧!
成都創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)蓬江,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108
先把引用文件的代碼寫好：
重慶分公司
重慶分公司
// 每個(gè)彈窗的標(biāo)識(shí)
var x =0;
var idzt = new Array();
var Window = function(config){
//ID不重復(fù)
idzt[x] = "zhuti"+x; //彈窗ID
//初始化，接收參數(shù)
this.config = {
width : config.width || 300, //寬度
height : config.height || 200, //高度
buttons : config.buttons || '', //默認(rèn)無按鈕
title : config.title || '標(biāo)題', //標(biāo)題
content : config.content || '內(nèi)容', //內(nèi)容
isMask : config.isMask == false?false:config.isMask || true, //是否遮罩
isDrag : config.isDrag == false?false:config.isDrag || true, //是否移動(dòng)
};
//加載彈出窗口
var w = ($(window).width()-this.config.width)/2;
var h = ($(window).height()-this.config.height)/2;
var nr = "這個(gè)JS文件把彈出窗口的內(nèi)容，樣式，位置，按鈕，以及遮罩層都做了處理，在引用前好好看看里面的代碼，最好都能弄懂，里面也做了詳細(xì)的注釋，希望可以幫的你。
下面是CSS樣式表：
.zhuti
{
position:absolute;
z-index:3;
font-size:14px;
border-radius:5px;
box-shadow:0 0 5px white;
overflow:hidden;
color:#333;
}
.title
{
background-color:#3498db;
vertical-align:middle;
height:35px;
width:100%;
line-height:35px;
text-indent:1em;
}
.close{
float:right;
width:35px;
height:35px;
font-weight:bold;
line-height:35px;
vertical-align:middle;
color:white;
font-size:18px;
}
.close:hover
{
cursor:pointer;
}
.content
{
text-indent:1em;
padding-top:10px;
}
.btnx
{
height:30px;
width:100%;
text-indent:1em;
}
.btn
{
height:28px;
width:80px;
float:left;
margin-left:20px;
color:#333;
}
#zz
{
width:100%;
height:100%;
opacity:0.15;
display:none;
background-color:#ccc;
z-index:2;
position:absolute;
top:0px;
left:0px;
}這個(gè)樣式表把每個(gè)標(biāo)簽和所需要的樣式都寫好了，這樣就能節(jié)省主要頁面的代碼量，并且讓主頁面看起來非常的整齊，如果要改，只需要在CSS樣式表中修改即可，注意：不管要引用什么文件，必須把Jquery文件放在最前面?。?！
下面是主頁面代碼：