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

javascript如何實(shí)現(xiàn)彈出層

本文小編為大家詳細(xì)介紹“javascript如何實(shí)現(xiàn)彈出層”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“javascript如何實(shí)現(xiàn)彈出層”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括平羅網(wǎng)站建設(shè)、平羅網(wǎng)站制作、平羅網(wǎng)頁制作以及平羅網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，平羅網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到平羅省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

javascript實(shí)現(xiàn)彈出層的方法：1、創(chuàng)建一個(gè)HTML示例文件；2、將待顯示的內(nèi)容先隱藏，在觸發(fā)點(diǎn)擊條件后，將原本隱藏的內(nèi)容顯示出來，代碼如“document.getElementById("open").onclick = function(e){...}”；3、提供遮罩層將原先的頁面內(nèi)容全部遮住即可。

使用JAVASCRIPT實(shí)現(xiàn)彈出層效果

設(shè)計(jì)

實(shí)現(xiàn)彈出層效果的思路非常簡單：將待顯示的內(nèi)容先隱藏，在觸發(fā)某種條件后（如點(diǎn)擊按鈕），將原本隱藏的內(nèi)容顯示出來。

實(shí)現(xiàn)




    Window對象
    


百度一下
打開彈出層
         
    這里是彈出層內(nèi)容
    關(guān)閉彈出層



    var toast = document.getElementById("toast");
    document.getElementById("open").onclick = function(e){           
        toast.style.display = "block";
        toast.style.position = "fixed";
        var winWidth = window.innerWidth;
        var winHeight = window.innerHeight;
        var targetWidth = toast.offsetWidth;
        var targetHeight = toast.offsetHeight;
        toast.style.top = (winHeight - targetHeight) / 2 + "px";
        toast.style.left = (winWidth - targetWidth) / 2 + "px";
    }
    document.getElementById("close").onclick = function(e){               
        toast.style.display = "none";
    }

顯示效果如下：

javascript如何實(shí)現(xiàn)彈出層

但是我們可以注意到，在彈出隱藏內(nèi)容之后我們還是可以通過鏈接進(jìn)入百度頁面。為了防止這種情況的發(fā)生，我們可以提供遮罩層將原先的頁面內(nèi)容全部遮住。代碼如下：




    Window對象
    


百度一下
打開彈出層
       
             
   　　這里是彈出層內(nèi)容
    　 關(guān)閉彈出層

var toast = document.getElementById("toast"); var cover = document.getElementById("cover"); document.getElementById("open").onclick = function(e){ cover.style.display = "block"; toast.style.position = "fixed"; var winWidth = window.innerWidth; var winHeight = window.innerHeight; var targetWidth = toast.offsetWidth; var targetHeight = toast.offsetHeight; toast.style.top = (winHeight - targetHeight) / 2 + "px"; toast.style.left = (winWidth - targetWidth) / 2 + "px"; } document.getElementById("close").onclick = function(e){ cover.style.display = "none"; }

這是再次測試下效果，如下圖：

讀到這里，這篇“javascript如何實(shí)現(xiàn)彈出層”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

http://weahome.cn/article/gehpdh.html