JS常見的彈出框（非常之簡單）
- 本文適合初入前端的同學(xué)
相信不少同學(xué)在學(xué)習(xí)前端的過程中，不管是制作demo，還是真實(shí)工作項(xiàng)目中，難免會遇到制作彈出框（提示框）的需求，這兩天正好遇到此類需求，順便進(jìn)行一個總結(jié)和梳理，希望能幫助到大家，因?yàn)橛玫牡胤揭膊簧伲?/li>
JS中瀏覽器常用的彈出框有三種：
- alert([content]): 【一個按鈕】提示框 ，只有確定按鈕
- confirm([content]): 【兩個按鈕】提示框，里面既有確定按鈕，也有取消按鈕，我們可以定義一個變量來接收它的返回值，返回值為TRUE說明點(diǎn)擊的是確定；
- prompt([content]):【兩個按鈕+輸入框】提示框，在confirm基礎(chǔ)上可以填寫原因，填寫的內(nèi)容可以用變量接收，常見于某些留言本；
下面我們來看一下具體在代碼中是怎么實(shí)現(xiàn)的
HTML&CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三種JS彈出框</title>
<style>
*{
margin:0;
padding:0;
list-style: none;
color: steelblue;
}
.box{
margin:20px auto;
width:300px;
padding:20px;
border:1px solid steelblue;
}
.box div{
height:32px;
margin:10px auto;
line-height: 32px;
}
.box div span{
display: inline-block;
width:50px;
}
.box div input{
width:188px;
height: 30px;
padding: 0 10px;
border: 1px solid #ddd;
}
.box .submit{
width: 150px;
margin-top:30px;
text-align: center;
background: steelblue;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<div>
<span>姓名:</span>
<input type="text" id="userName">
</div>
<div>
<span>性別:</span>
<input type="text" id="userSex">
</div>
<div>
<span>愛好:</span>
<a id="like" style="color: #DDD;">這里稍后再看</a>
</div>
<div class="submit" id="submit">提交</div>
</div>
</body>
</html>
<script>
var nameInfo = document.getElementById('userName'),
sexInfo = document.getElementById('userSex'),
submit = document.getElementById('submit'),
like = document.getElementById('like');
</script>
無添加JS彈框效果的靜態(tài)頁面
下面添加JS來分別看看三個不同的效果：
-
alert([content]):
將以下代碼粘貼至上文HTML&CSS文檔中<script>標(biāo)簽中的代碼后；
submit.onclick =function () {
alert('您的姓名是'+nameInfo.value + '\n' +
'您的性別是'+sexInfo.value)
// 此處的 '\n' 是起換行顯示作用
}
瀏覽器中預(yù)覽效果： 點(diǎn)擊提交后出現(xiàn)彈窗
- confirm([content]):
submit.onclick =function () {
confirm('請問您的姓名是'+nameInfo.value +'嗎？' +
'\n' + '您的性別是'+sexInfo.value+'嗎？')
}
//注：（此處還可以申明一個變量 flag）
submit.onclick =function () {
var flag = confirm('請問您的姓名是'+nameInfo.value +'嗎？' +
'\n' + '您的性別是'+sexInfo.value+'嗎？')
console.log(flag);
}
瀏覽器中預(yù)覽效果： 點(diǎn)擊提交后出現(xiàn)彈窗(
//在彈出框中點(diǎn)擊確定，返回true
//在彈出框中點(diǎn)擊取消，返回false)
-
prompt([content])
submit.onclick =function () { sexInfo.value ==='女'?sex='美女':sex='帥哥'; var like = prompt(sex+'你的愛好是什么呢？') window.like.innerHTML = like; window.like.style.color='red'; }
瀏覽器中預(yù)覽效果： 點(diǎn)擊提交后出現(xiàn)彈窗(如果用戶點(diǎn)擊確認(rèn)，那么返回值為輸入的值。如果用戶點(diǎn)擊取消，那么返回值為 null。)
相信看完本文并且自行在瀏覽器中測試的同學(xué)應(yīng)該已經(jīng)能初步掌握本文了javascript中的三種彈出對話框，分別是alert()方法，confirm()方法，prompt()方法了，現(xiàn)在回憶回憶是否已經(jīng)掌握了呢？
如有異議，歡迎指正，一起交流進(jìn)步~
