『壹』 html點擊按鈕彈出窗口如何實現
實現原理：display：none/block;把代碼直接復制看效果
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
.firstBoxh5{
font-size:30px;
color:#000;
font-weight:700;
}
.firstBoxtable{
border:1pxsolid#E6E6E6;
margin:15px0px;
}
.firstBoxtablethead{
background:#E6E6E6;
}
.firstBoxtabletrtd{
width:150px;
text-align:center;
}
.firstBoxbutton{
width:100px;
height:40px;
background:#E6E6E6;
border:1pxsolid#C7D3E6;
text-align:center;
line-height:40px;
font-size:16px;
color:#000;
cursor:pointer;
}
#twoBox{
margin:20px0px0px;
background:#E6E6E6;
height:250px;
width:310px;
position:relative;
display:none;
}
#twoBox.twoBox_lever{
width:290px;
height:230px;
background:#fff;
border:1pxsolid#ccc;
border-radius:5px;
position:absolute;
right:0;
top:0;
left:0;
bottom:0;
margin:auto;
}
.twoBox_lever_two{
width:calc(100%-10px);
height:calc(100%-10px);
padding:5px;
}
.twoBox_lever_two.two_title{
width:100%;
height:40px;
background:#E6E6E6;
border:1pxsolid#ccc;
border-radius:5px;
}
.twoBox_lever_two.two_titlep{
font-size:16px;
color:#000;
line-height:40px;
padding-left:10px;
font-weight:700;
}
.twoBox_lever_twoform{
width:calc(100%-20px);
margin:10px;
border-bottom:1pxsolid#ccc;
height:calc(100%-100px);
}
.twoBox_lever_twoforminput{
height:20px;
line-height:20px;
padding:0px10px;
margin:5px;
cursor:pointer;
}
.twoBox_lever_two.two_footer{
height:40px;
text-align:right;
padding-right:10px;
}
.twoBox_lever_two.two_footerbutton{
height:30px;
background:#E6E6E6;
border:1pxsolid#C7D3E6;
text-align:center;
line-height:30px;
font-size:16px;
color:#000;
cursor:pointer;
}
.twoBox_lever_two.two_footerbutton:first-of-type{
width:120px;
padding:0px10px;
}
.twoBox_lever_two.two_footerbutton:last-of-type{
width:50px;
}
.show{
display:block!important;
}
</style>
</head>
<body>
<divstyle="margin:10px;">
<!--第一部分-->
<divclass="firstBox">
<h5>已有的用戶：</h5>
<table>
<thead>
<tr>
<th>名字</th>
<th>郵箱</th>
<th>密碼</th>
</tr>
</thead>
<tbody>
<tr>
<td>姓名</td>
<td>[email protected]</td>
<td>xingtuan</td>
</tr>
</tbody>
</table>
<buttonid="button">創建新用戶</button>
</div>
<!--第二部分-->
<divid="twoBox">
<divclass="twoBox_lever">
<divclass="twoBox_lever_two">
<divclass="two_title">
<p>創建新用戶</p>
</div>
<form>
<labelstyle="float:left">名字：
<inputtype="text"placeholder="請輸入名字">
</label>
<labelstyle="float:left">郵箱：
<inputtype="text"placeholder="請輸入郵箱">
</label>
<labelstyle="float:left">密碼：
<inputtype="password"placeholder="請輸入密碼">
</label>
</form>
<divclass="two_footer">
<button>創建一個用戶</button>
<button>取消</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
window.onload=function(){
document.getElementById("button").onclick=function(){
document.getElementById("twoBox").classList.add("show")
}
}
</script>
</html>
『貳』 前端，點擊彈出一個新的html頁面
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
<buttonclass="open-modal">點擊我以後，你就點不到我了</button>
<divclass="mask"style="display:none;position:fixed;left:0;top:0;right:0;bottom:0;background-color:rgba(0,0,0,.8)"></div>
<divclass="modal"style="display:none;transform:translate(-50%,-50%);left:50%;top:50%;position:fixed;width:300px;height:300px;background-color:#fff;border-radius:10px;">
<buttonclass="close-modal">關閉我</button>
</div>
<script>
document.addEventListener("DOMContentLoaded",function(){
varmask=document.querySelector('.mask')
varmodal=document.querySelector('.modal')
varopen=document.querySelector('.open-modal')
varclose=document.querySelector('.close-modal')
open.addEventListener('click',function(e){
mask.style.display='block'
modal.style.display='block'
})
close.addEventListener('click',function(e){
mask.style.display='none'
modal.style.display='none'
})
})
</script>
</body>
</html>
『叄』 前端如何實現點擊評論，彈出一個框啊，而且是帶三角的
想簡單就是做一個帶三角的評論框背景圖，然後在評論裡面寫一個div，背景放這張圖，絕對定位到評論的下方，div裡面放一個input；
具體樣式自己弄；
然後就是通過JS來實現點擊評論顯示出評論框；
$(".pinglun").click(function(){
$("plDialog").show()
})
『肆』 前端大神看過來，如何將彈出頁面做成div的樣子
在github上看到一個專門收集這些問題的，對於移動方面由於自己做得不多，而且由於測試環境所限，無法重現具體bug，下面來一起看看這些坑以及是怎麼解決，學習多一些移動前端的知識，以後做的時候就要所注意。
『伍』 前端有沒有好一點的提示框
layer彈出層框架，包括提示框、確認框、輸入框等，並且輕量，兼容除IE6/7以外的全部瀏覽器，並且絕大多數結構支持響應式。
『陸』 ecstore前端彈出層使用的是什麼框架
考慮到內容區域需要居中對齊，所以至少要有一個div來定位和顯示背景，再用一個div居中內容，內容區域想分成header、body和footer。
<divclass="rs-dialog"id="myModal1">
<divclass="rs-dialog-box">
<aclass="close"href="#">×</a>
<divclass="rs-dialog-header">
<h3>標題</h3>
</div>
<divclass="rs-dialog-body">
<p>內容</p>
</div>
<divclass="rs-dialog-footer">
<inputtype="button"class="close"value="Close"style="float:right">
</div>
</div>
</div>
『柒』 web前端的彈出提示欄咋寫
js有三種彈出框
alert()--警告消息框
alert 方法有一個參數，即希望對用戶顯示的文本字元串。該字元串不是 HTML 格式。該消息框提供了一個「確定」按鈕讓用戶關閉該消息框，並且該消息框是模式對話框，也就是說，用戶必須先關閉該消息框然後才能繼續進行操作。例如：window.alert("歡迎！請按「確定」繼續。")
confirm()--確認消息框
使用確認消息框可向用戶問一個「是-或-否」問題，並且用戶可以選擇單擊「確定」按鈕或者單擊「取消」按鈕。confirm 方法的返回值為 true 或 false。該消息框也是模式對話框：用戶必須在響應該對話框（單擊一個按鈕）將其關閉後，才能進行下一步操作。
例如： var truthBeTold = window.confirm("單擊「確定」繼續。單擊「取消」停止。")
prompt()--提示消息框
提示消息框提供了一個文本欄位，用戶可以在此欄位輸入一個答案來響應您的提示。該消息框有一個「確定」按鈕和一個「取消」按鈕。如果您提供了一個輔助字元串參數，則提示消息框將在文本欄位顯示該輔助字元串作為默認響應。否則，默認文本為 "<undefined>"。 與alert( ) 和 confirm( ) 方法類似，prompt 方法也將顯示一個模式消息框。用戶在繼續操作之前必須先關閉該消息框 。
例如：var theResponse = window.prompt("歡迎？","請在此輸入您的姓名。");
『捌』 請問前端大神window.open的彈出框出現在瀏覽器後面怎麼解決呀急
方法一：彈出窗口<body>里加上代碼：οnblur="self.focus()"：
<body οnblur="self.focus()">
使用此方法時，焦點會一直在此彈出窗口上，並不能在其他窗口進行操作
*********************************************************************
方法二：用showModalDialog方法建立模式對話框：
<script>
function topwin(){
window.showModalDialog("D:/window.html","","dialogWidth:300px;dialogHeight:300px;scroll:no;status:no")
}
</script>
<button onClick="topwin()">打開模式窗口</button>
此方法的效果和方法一的效果相同，彈出窗口前端顯示，但是不能在其他窗口做任何操作了，也是丟了焦點。
『玖』 html5如何實現彈出提示框，並且伴隨遮罩層並且可以關閉彈出框
通過jquery的show()和hide()函數聯合使用，實現彈出窗口。
一、show（）和hide（）函數解析：
1、show() 方法顯示隱藏的被選元素。
注意：show() 適用於通過 jQuery 方法和 CSS 中 display:none 隱藏的元素（不適用於通過 visibility:hidden 隱藏的元素）。
2、hide() 方法隱藏被選元素。
這與 CSS 屬性 display:none 類似，但是隱藏的元素不會被完全顯示（不再影響頁面的布局）。
二、設計一個HTML頁面，包括一個簡單的彈出窗，和一個顯示按鈕。其中，調用了jquery的以上兩個函數。具體代碼如下：
『拾』 怎麼在前端彈出提示框
If MsgBox("提示：是否運行應用程序？", vbOKCancel, "提示")= vbOK Then
Shell "d:\1.exe"
Else
Shell "d:\2.exe"
End If