真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

怎么用jQuery實(shí)現(xiàn)彈出窗口

這篇文章主要介紹“怎么用jQuery實(shí)現(xiàn)彈出窗口”，在日常操作中，相信很多人在怎么用jQuery實(shí)現(xiàn)彈出窗口問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么用jQuery實(shí)現(xiàn)彈出窗口”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營(yíng)銷、網(wǎng)站重做改版、興寧網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5建站、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為興寧等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

先把引用文件的代碼寫好：

// 每個(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 = "

"; $("body").append(nr); //加載彈窗標(biāo)題 var content =""+this.config.title+"×

"+this.config.content+""; //加載按鈕 content = content+""+this.config.buttons+""; //將標(biāo)題、內(nèi)容及按鈕添加進(jìn)窗口 $('#'+idzt[x]).html(content); //創(chuàng)建遮罩層 if(this.config.isMask) { var zz = ""; $("body").append(zz); $("#zz").css('display','block'); } //最大最小限制，以免移動(dòng)到頁(yè)面外 var maxX = $(window).width()-this.config.width; var maxY = $(window).height()-this.config.height; var minX = 0, minY = 0; //窗口移動(dòng) if(this.config.isDrag) { //鼠標(biāo)移動(dòng)彈出窗 $(".title").bind("mousedown",function(e){ var n = $(this).attr("bs"); //取標(biāo)識(shí) //使選中的到最上層 $(".zhuti").css("z-index",3); $('#'+idzt[n]).css("z-index",4); //取初始坐標(biāo) var endX = 0, //移動(dòng)后X坐標(biāo) endY = 0, //移動(dòng)后Y坐標(biāo) startX = parseInt($('#'+idzt[n]).css("left")), //彈出層的初始X坐標(biāo) startY = parseInt($('#'+idzt[n]).css("top")), //彈出層的初始Y坐標(biāo) downX = e.clientX, //鼠標(biāo)按下時(shí)，鼠標(biāo)的X坐標(biāo) downY = e.clientY; //鼠標(biāo)按下時(shí)，鼠標(biāo)的Y坐標(biāo) //綁定鼠標(biāo)移動(dòng)事件 $("body").bind("mousemove",function(es){ endX = es.clientX - downX + startX; //X坐標(biāo)移動(dòng) endY = es.clientY - downY + startY; //Y坐標(biāo)移動(dòng) //最大最小限制 if(endX > maxX) { endX = maxX; } else if(endX < 0) { endX = 0; } if(endY > maxY) { endY = maxY; } else if(endY < 0) { endY = 0; } $('#'+idzt[n]).css("top",endY+"px"); $('#'+idzt[n]).css("left",endX+"px"); window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty(); //取消選中文本 }); }); //鼠標(biāo)按鍵抬起，釋放移動(dòng)事件 $("body").bind("mouseup",function(){ $("body").unbind("mousemove"); }); } //關(guān)閉窗口 $(".close").click(function(){ var m = this.getAttribute("bs"); //找標(biāo)識(shí) $('#'+idzt[m]).remove(); //移除彈窗 $('#zz').remove(); //移除遮罩 }) x++; //標(biāo)識(shí)增加 }

這個(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é)省主要頁(yè)面的代碼量，并且讓主頁(yè)面看起來非常的整齊，如果要改，只需要在CSS樣式表中修改即可，注意：不管要引用什么文件，必須把Jquery文件放在最前面?。?！

下面是主頁(yè)面代碼：





無標(biāo)題文檔






*{
 margin: 0px auto;
}











$(document).ready(function(e) {
 
 $('#btntc').click(function(){
  
   var html = "這是測(cè)試的彈窗";
   var button ="";

   var win = new Window({
    
    width : 400, //寬度
    height : 300, //高度
    title : '測(cè)試彈窗', //標(biāo)題
    content : html, //內(nèi)容
    isMask : false, //是否遮罩
    buttons : button, //按鈕
    isDrag:true, //是否移動(dòng)
    
    });
  
  })
});

同樣的，主頁(yè)面里面也加了詳細(xì)的注釋，這樣便于日后的理解，希望可以幫的自己和大家。讓我們看看效果吧：

怎么用jQuery實(shí)現(xiàn)彈出窗口

點(diǎn)擊彈出窗口之后的效果：

怎么用jQuery實(shí)現(xiàn)彈出窗口

我們可以看到每個(gè)彈出窗口都可以移動(dòng)，并且可以彈出無數(shù)個(gè)窗口，如果把遮罩層改成true,那樣就不能再出現(xiàn)第二個(gè)彈出窗口了。

一定要記住遮罩層的實(shí)用，這樣可以避免很多BUG如果要引用彈出窗口一定要測(cè)試好了再使用，以防出現(xiàn)問題，切記！

到此，關(guān)于“怎么用jQuery實(shí)現(xiàn)彈出窗口”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

本文題目：怎么用jQuery實(shí)現(xiàn)彈出窗口
地址分享：http://weahome.cn/article/gscdds.html