国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > HTML+CSS+JS自主設(shè)計彈出窗口的方法，在線編輯器

HTML+CSS+JS自主設(shè)計彈出窗口的方法，在線編輯器

時間：2023-09-11 06:54:01 | 來源：網(wǎng)站運營

時間：2023-09-11 06:54:01 來源：網(wǎng)站運營

HTML+CSS+JS自主設(shè)計彈出窗口的方法，在線編輯器：

html怎么彈出一個小窗口

html彈出一個小窗口的方法可能有很多，就比如本站（笨鳥工具-璞玉天成，大器晚成）的導航欄點擊之后會有一個小窗口（小頁面）彈出，然后文章頁面的底部有兩個小圖標，當鼠標懸放在上面的時候，也可以彈出一個小窗口，然后點擊下方實例代碼的試一試按鈕，也可以彈出一個小窗口，是本站提供的HTML+css+javascript的在線編輯器。這里介紹的一簡單的方法和一種自主設(shè)計的方法，不需要很復雜的程序設(shè)計，也不需要框架，用javascript和css就可以：

自主設(shè)計html彈出小窗口的方法

這個方法需要結(jié)合html、css和javascript三種語言，即web三件套全得用上。該方法的原理就是將本來的窗口的style中display設(shè)置為none，當點擊按鈕之后，設(shè)置為block，并為該窗口綁定位置，實例代碼如下：

<div id="ck1"><p style='text-align:center;line-height:80px;'>這個窗口，可以說是自己設(shè)計的了，可以在這里添加其它的標簽和功能</p></div><button class='btn btn-default' onclick='show2()'>點擊彈出自己設(shè)計的小窗口</button><style> #ck1{display:none;position:fixed;top:20%;left:20%;width:50%;height:80px;z-index:9999;background-color:skyblue;border-radius:5px;}</style><script> function show2(){ document.getElementById("ck1").style.display = "block"; }</script>

代碼解析

這個自主設(shè)計的方法中，除了display屬性的設(shè)置之外，另一個關(guān)鍵點在于z-index值的設(shè)置，html元素的排列堆疊，不僅有水平方向、豎直方向，還有深度方向，就像立體的直角坐標系當中，不僅有x軸、y軸，還有z軸，即z-index的設(shè)置可以修改div或html元素的z軸位置。

HTML+CSS+JS在線編輯器可以參考原文

原文地址：html怎么彈出一個小窗口，自主設(shè)計方法，在線編輯器 - HTML教程

關(guān)鍵詞：方法,編輯,窗口,自主,設(shè)計

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉