整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML+CSS+JS自主設計彈出窗口的方法，在線編輯器
html彈出一個小窗口的方法可能有很多，就比如本站（笨鳥工具-璞玉天成，大器晚成）的導航欄點擊之后會有一個小窗口（小頁面）彈出，然后文章頁面的底部有兩個小圖標，當鼠標懸放在上面的時候，也可以彈出一個小窗口，然后點擊下方實例代碼的試一試按鈕，也可以彈出一個小窗口，是本站提供的HTML+css+javascript的在線編輯器。這里介紹的一簡單的方法和一種自主設計的方法，不需要很復雜的程序設計，也不需要框架，用javascript和css就可以：
HTML+CSS+JS自主設計彈出窗口的方法，在線編輯器
這個方法需要結合html、css和javascript三種語言，即web三件套全得用上。該方法的原理就是將本來的窗口的style中display設置為none，當點擊按鈕之后，設置為block，并為該窗口綁定位置，實例代碼如下：
<div id="ck1"><p style='text-align:center;line-height:80px;'>這個窗口，可以說是自己設計的了，可以在這里添加其它的標簽和功能</p></div>
<button class='btn btn-default' onclick='show2()'>點擊彈出自己設計的小窗口</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>HTML+CSS+JS自主設計彈出窗口的方法，在線編輯器
這個自主設計的方法中，除了display屬性的設置之外，另一個關鍵點在于z-index值的設置，html元素的排列堆疊，不僅有水平方向、豎直方向，還有深度方向，就像立體的直角坐標系當中，不僅有x軸、y軸，還有z軸，即z-index的設置可以修改div或html元素的z軸位置。
原文地址：html怎么彈出一個小窗口，自主設計方法，在線編輯器 - HTML教程
擊右上方紅色按鈕關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！
大家好！我是/小鄭搞碼事/的小鄭
今天和大家分享一下JS如何操作瀏覽器窗口。只講如何打開一個新窗口
先來看效果圖
上面這個圖界面效果就是我們要實現的。
我們常常需要創建一個新窗口，用來向用戶顯示額外的信息，同時又避免他們正在閱讀的信息消失。從實現方案上來看，盡管我們可以用HTML打開一個新的瀏覽器窗口，但是使用JavaScript可以對新窗口的內容和特性進行更多的控制。
接下來，我們看一下怎么實現的
定義一個打開新窗口的函數newWindow。如上面代碼所示，變量catWindow包含一個新的窗口對象，這個對象引用圖像文件icon.png，這個新窗口的名稱是catWin，必須設置名稱，因為我們以后可能希望在a或另一個腳本中引用這個窗口。新窗口的寬度是350像素，高度是260像素，位置是左邊400，上邊400。
頁面中，包含一個onload事件處理程序，它調用newWinLinks函數，newWinLinks循環遍歷頁面上的a，檢查是否有任何a包含class屬性值newWin。如果有，就設置這個a元素的onclick事件處理程序，從而，當點擊這個a時，調用newWindow函數。
總結一下
需要注意兩個地方：
1、newWindow中，在寬度和高度參數中的逗號之間不能有任何空格，如果有空格，那么腳本可能在某些瀏覽器中無效，總地來說，當腳本出現錯誤，需要進行高度時，要首先查找這樣的小問題。
2、比如向窗口中添加參數時，希望窗口具有工具欄，地址欄，滾動條
toolbar=yes,location=yes,scrollbars=yes
參數默認是no，可以不填。當然瀏覽器上表現也有不同，需要知道。
圖1
圖2
圖3
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
