A. 前端大神看过来，如何将弹出页面做成div的样子
在github上看到一个专门收集这些问题的，对于移动方面由于自己做得不多，而且由于测试环境所限，无法重现具体bug，下面来一起看看这些坑以及是怎么解决，学习多一些移动前端的知识，以后做的时候就要所注意。
B. Web前端如何实现网页弹框功能
可以使用"layer.js"等插件实现。
使用插件可以直接调用方法，实现网页弹框。如果要求不高，也可以直接使用alert方法直接弹出提示框。
C. web前端的弹出提示栏咋写
js有三种弹出框
alert()--警告消息框
alert 方法有一个参数，即希望对用户显示的文本字符串。该字符串不是 HTML 格式。该消息框提供了一个“确定”按钮让用户关闭该消息框，并且该消息框是模式对话框，也就是说，用户必须先关闭该消息框然后才能继续进行操作。例如：window.alert("欢迎！请按“确定”继续。")
confirm()--确认消息框
使用确认消息框可向用户问一个“是-或-否”问题，并且用户可以选择单击“确定”按钮或者单击“取消”按钮。confirm 方法的返回值为 true 或 false。该消息框也是模式对话框：用户必须在响应该对话框（单击一个按钮）将其关闭后，才能进行下一步操作。
例如： var truthBeTold = window.confirm("单击“确定”继续。单击“取消”停止。")
prompt()--提示消息框
提示消息框提供了一个文本字段，用户可以在此字段输入一个答案来响应您的提示。该消息框有一个“确定”按钮和一个“取消”按钮。如果您提供了一个辅助字符串参数，则提示消息框将在文本字段显示该辅助字符串作为默认响应。否则，默认文本为 "<undefined>"。 与alert( ) 和 confirm( ) 方法类似，prompt 方法也将显示一个模式消息框。用户在继续操作之前必须先关闭该消息框 。
例如：var theResponse = window.prompt("欢迎？","请在此输入您的姓名。");
D. 前端，点击弹出一个新的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>
E. 如何用JS弹出“有输入框并带有是、否、取消按钮”的对话框。
具体代码如下：
<html>
<head>
<script type="text/javascript">
function disp_prompt()
{
var name=prompt("请输入您的名字","小贾")
if (name!=null && name!="")
{
document.write("你好，" + name + "！今天过得好吗？")
}
}
</script>
</head>
<body>
<input type="button" onclick="disp_prompt()" value="显示一个提示框" />
</body>
</html>
(5)前端弹窗扩展阅读：
prompt() 方法用于显示可提示用户进行输入的对话框。
如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。
在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 prompt() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。
F. msgTip（提示弹窗）之类的js和css有哪些库包
引jquery
然后自己写一个
后者，其他的前端框架里，都自带的有，你如果有用前端框架，就不用自己写了
G. 纯前端 求推荐个弹窗插件或方法···，窗体内容完全自定义，然后传值方便，
artdialog 弹窗；这是个比较早的弹窗插件了，依赖 jQuery 插件；有多个版本，至今也一直在维护；用法也比较简单；
artdialog 不想现在流行的 modal ，他不需要你提前预编写好 dialog 的 html 代码，而是直接通过 js 调用就行，他会自动生成 dialog 内容，并且自动加载样式；支持在弹窗中嵌套 iframe；
最新版本v5：网页链接
v4 版本：网页链接
官网：网页链接
H. html5如何实现弹出提示框，并且伴随遮罩层并且可以关闭弹出框
通过jquery的show()和hide()函数联合使用，实现弹出窗口。
一、show（）和hide（）函数解析：
1、show() 方法显示隐藏的被选元素。
注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。
2、hide() 方法隐藏被选元素。
这与 CSS 属性 display:none 类似，但是隐藏的元素不会被完全显示（不再影响页面的布局）。
二、设计一个HTML页面，包括一个简单的弹出窗，和一个显示按钮。其中，调用了jquery的以上两个函数。具体代码如下：
I. 怎么在前端弹出提示框
If MsgBox("提示：是否运行应用程序？", vbOKCancel, "提示")= vbOK Then
Shell "d:\1.exe"
Else
Shell "d:\2.exe"
End If
J. 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>