1. <ul id="0c1fb"></ul>

      <noscript id="0c1fb"><video id="0c1fb"></video></noscript>
      <noscript id="0c1fb"><listing id="0c1fb"><thead id="0c1fb"></thead></listing></noscript>

      99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

      RELATEED CONSULTING
      相關(guān)咨詢
      選擇下列產(chǎn)品馬上在線溝通
      服務(wù)時(shí)間:8:30-17:00
      你可能遇到了下面的問(wèn)題
      關(guān)閉右側(cè)工具欄

      新聞中心

      這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
      jQuery如何實(shí)現(xiàn)彈出窗口-創(chuàng)新互聯(lián)

      這篇文章主要介紹jQuery如何實(shí)現(xiàn)彈出窗口,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!

      成都創(chuàng)新互聯(lián)從2013年創(chuàng)立,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目做網(wǎng)站、成都網(wǎng)站建設(shè)網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命,1280元紅塔做網(wǎng)站,已為上家服務(wù),為紅塔各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

      今天講了Jquery的彈出窗口的組成和用法:

      先把引用文件的代碼寫(xiě)好:

      // 每個(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)無(wú)按鈕
        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+"×
      ";  //加載彈窗內(nèi)容  var nrh = this.config.height - 75;  content = content+""+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)簽和所需要的樣式都寫(xiě)好了,這樣就能節(jié)省主要頁(yè)面的代碼量,并且讓主頁(yè)面看起來(lái)非常的整齊,如果要改,只需要在CSS樣式表中修改即可,注意:不管要引用什么文件,必須把Jquery文件放在最前面!??!

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

      
      
      
      
      無(wú)標(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)彈出窗口

      jQuery如何實(shí)現(xiàn)彈出窗口

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

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

      以上是“jQuery如何實(shí)現(xiàn)彈出窗口”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道!

      另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。


      本文名稱:jQuery如何實(shí)現(xiàn)彈出窗口-創(chuàng)新互聯(lián)
      網(wǎng)頁(yè)網(wǎng)址:http://ef60e0e.cn/article/hcsdc.html
      99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区
      1. <ul id="0c1fb"></ul>

        <noscript id="0c1fb"><video id="0c1fb"></video></noscript>
        <noscript id="0c1fb"><listing id="0c1fb"><thead id="0c1fb"></thead></listing></noscript>

        炎陵县| 蓝田县| 芒康县| 肥乡县| 开江县| 定日县| 都昌县| 晋中市| 温泉县| 永泰县| 霍州市| 长兴县| 莱芜市| 庆阳市| 龙陵县| 武宣县| 乐山市| 都兰县| 宾阳县| 井冈山市| 伊春市| 晋中市| 交城县| 沙河市| 额济纳旗| 托里县| 合阳县| 河池市| 临澧县| 阜平县| 康定县| 刚察县| 霍林郭勒市| 乌什县| 山丹县| 石泉县| 灯塔市| 南安市| 洪湖市| 濮阳市| 波密县|