JS常見的彈出框（非常之簡單）
- 本文適合初入前端的同學
相信不少同學在學習前端的過程中惊科，不管是制作demo科阎，還是真實工作項目中递递，難免會遇到制作彈出框（提示框）的需求，這兩天正好遇到此類需求癞志，順便進行一個總結(jié)和梳理往枷，希望能幫助到大家，因為用的地方也不少今阳；
JS中瀏覽器常用的彈出框有三種：
- alert([content]): 【一個按鈕】提示框 师溅，只有確定按鈕
- confirm([content]): 【兩個按鈕】提示框茅信，里面既有確定按鈕盾舌，也有取消按鈕，我們可以定義一個變量來接收它的返回值蘸鲸，返回值為TRUE說明點擊的是確定妖谴；
- prompt([content]):【兩個按鈕+輸入框】提示框，在confirm基礎(chǔ)上可以填寫原因酌摇，填寫的內(nèi)容可以用變量接收膝舅，常見于某些留言本；
下面我們來看一下具體在代碼中是怎么實現(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>標簽中的代碼后窑多；
submit.onclick =function () {
alert('您的姓名是'+nameInfo.value + '\n' +
'您的性別是'+sexInfo.value)
// 此處的 '\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);
}
瀏覽器中預覽效果： 點擊提交后出現(xiàn)彈窗(
//在彈出框中點擊確定，返回true
//在彈出框中點擊取消姻锁，返回false)
-
prompt([content])
submit.onclick =function () { sexInfo.value ==='女'?sex='美女':sex='帥哥'; var like = prompt(sex+'你的愛好是什么呢？') window.like.innerHTML = like; window.like.style.color='red'; }
瀏覽器中預覽效果： 點擊提交后出現(xiàn)彈窗(如果用戶點擊確認，那么返回值為輸入的值铲掐。如果用戶點擊取消，那么返回值為 null值桩。)
相信看完本文并且自行在瀏覽器中測試的同學應(yīng)該已經(jīng)能初步掌握本文了javascript中的三種彈出對話框摆霉，分別是alert()方法，confirm()方法奔坟，prompt()方法了携栋，現(xiàn)在回憶回憶是否已經(jīng)掌握了呢？
如有異議蛀蜜，歡迎指正刻两，一起交流進步~
