整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
錄
1.警告彈窗
2.確認彈窗
3.提示彈窗
1.警告彈窗 alert();
警告框經常用于確保用戶可以得到某些信息。
當警告框出現后，用戶需要點擊確定按鈕才能繼續進行操作。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function myFunction(){
alert("hello");
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value="警告" />
</body>
</html>
此代碼運行成功后,若點擊"警告"按鈕 會出現內容顯示為"hello"的彈窗.
2.確認彈窗 confirm();
確認彈框通常用于驗證是否接受用戶操作。
當確認卡彈出時，用戶可以點擊 "確認" 或者 "取消" 來確定用戶操作。
當你點擊 "確認", 確認框返回 true， 如果點擊 "取消", 確認框返回 false。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>練習</title>
</head>
<body>
<p>點擊按鈕，顯示確認框。</p>
<button onclick="myFunction()">點這里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var r=confirm("你確定?");
if (r==true){
x="你按下了確定按鈕";
}
else{
x="你選擇了取消";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
點擊按鈕后會出現確認彈框"你確定?"
點擊"確定"會提示"你按下了確定按鈕";
否則會提示"你選擇了取消";
3.提示彈窗 prompt()
提示框經常用于提示用戶在進入頁面前輸入某個值。
當提示框出現后，用戶需要輸入某個值，然后點擊確認或取消按鈕才能繼續操縱。
如果用戶點擊確認，那么返回值為輸入的值。如果用戶點擊取消，那么返回值為 null。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>練習</title>
</head>
<body>
<button onclick="myFunction()">點這里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var person=prompt("請輸入你的名字","jack");
if (person!=null && person!=""){
x="你好 " + person;
document.getElementById("demo").innerHTML=x;
}
}
</script>
</body>
</html>
點擊按鈕后會出現提示輸入你的名字
輸入后點擊確定會出現
"jack你好 "
希望本文所述對大家vue.js程序設計有所幫助。
歡迎大家多多留言討論，如有錯誤請大神指教，如果你是小白也可以私信“資料”領取前端學習資料一起學習
次在講css實現tab切換時，有童靴留言說可以使用錨點實現，對的，就是可以使用錨點，然而，使用錨點涉及到的又有哪些關鍵技術了？今天我們以錨點實現彈窗為例來解答這個問題
一句話總結實現原理就是：a標簽改變hash值觸發css3偽類target作用對應id的dom元素。
：target是CSS里一個非常有趣的偽選擇器。它在CSS里發生作用的過程是這樣的：當瀏覽器地址里的hash（地址#號后面的部分）和：target偽選擇器指定的ID匹配上時，它的樣式就會在這個ID元素上生效。
實例dom結構：
dom結構比較簡單，兩個帶href為#id的a標簽，以及兩上對應#id后面id值作為自己id的p標簽。下面我們給偽元素定義一個樣式：
然后，我們點擊#news1時p#news1元素對這個樣式生效，點擊#news2時p#news2元素對這個樣式生效。（結論是：target選擇器會突出顯示當前活動的HTML錨）效果是這樣的：
好了，以上實現就是為了說明偽元素是這樣作用的，記住上面加粗語句就行了。下面來實現我們本篇要講的主題—錨點實現彈窗
知道target是怎么作用的了，那下面這個彈窗功能就好實現了。
實現的dom結構：
由上圖可知，兩個帶href#id的a標簽，和兩個id等于#id的dom結構。運行效果是這樣的：
給target偽類定義樣式：
這個樣式的作用是將dom從不顯示變成顯示。
當我們點擊“點擊我”按鈕時，通過錨點改變hash值在通過偽類target將id="popup1"的dom添加偽類定義的樣式。結果是這樣的：
當點擊浮層上的叉時，關閉這個浮層，原理也是一樣的（改變hash引起偽類失效）。
當我們點擊“也點擊我嘛”按鈕時，同樣通過錨點改變hash值在通過偽類target將id="popup2"的dom添加偽類定義的樣。效果是這樣的：
只是這種情況將設置關閉的div.cancel設置成了全局寬度，層級在浮層下。所以通過點擊浮層外的區域就關閉了浮層，關閉原理是一樣的。
CSS3的target這個屬性，雖然所有的主流瀏覽器都支持，除了IE8及以下的版本，但是現在使用這種技術的人還是比較少，其實，如果不是太注重動態效果，使用這種瀏覽器原生技術來修飾你的應用也是不錯的選擇。
短內容，說完整事，哪怕只讀一篇也能學知識。點擊關注小鄭搞碼事，說的都是那堆代碼。謝謝您的鼓勵！
<style type="text/css">
/*隱藏彈窗*/
#a{
display: none;
}
/*彈窗樣式*/
.b{
width: 400px;
height: 300px;
background-color: #fff;
border: 1px solid #000;
position: fixed;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
/*層次級別*/
z-index: 9999;
}
/*彈窗背景灰度*/
.c{
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
left: 0;
top:0;
/*透明度*/
opacity: 0.3;
/*兼容ie*/
filter: alpha(opacity=30);
z-index: 9990;
}
#off{
text-decoration: none;
position: absolute;
right: 10px;
top: 10px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var a = document.getElementById('a');
var off = document.getElementById('off');
//網頁打開兩秒后出項彈窗
setTimeout(function(){
a.style.display = 'block';
},2000);
//點擊關閉彈窗
off.onclick=function(){
a.style.display = 'none';
}
}
</script>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
