当前位置:首页 » 网页前端 » 前端弹框
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端弹框

发布时间: 2022-02-08 12:23:54

⑴ 怎么在前端弹出提示框

If MsgBox("提示:是否运行应用程序?", vbOKCancel, "提示")= vbOK Then
Shell "d:\1.exe"
Else
Shell "d:\2.exe"
End If

⑵ 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>

⑶ 前端如何实现点击评论,弹出一个框啊,而且是带三角的

想简单就是做一个带三角的评论框背景图,然后在评论里面写一个div,背景放这张图,绝对定位到评论的下方,div里面放一个input;
具体样式自己弄;
然后就是通过JS来实现点击评论显示出评论框;
$(".pinglun").click(function(){
$("plDialog").show()

})

⑷ 如何用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>

(4)前端弹框扩展阅读:

prompt() 方法用于显示可提示用户进行输入的对话框。

如果用户单击提示框的取消按钮,则返回 null。如果用户单击确认按钮,则返回输入字段当前显示的文本。

在用户点击确定按钮或取消按钮把对话框关闭之前,它将阻止用户对浏览器的所有输入。在调用 prompt() 时,将暂停对 JavaScript 代码的执行,在用户作出响应之前,不会执行下一条语句。

⑸ Web前端如何实现网页弹框功能

可以使用"layer.js"等插件实现。
使用插件可以直接调用方法,实现网页弹框。如果要求不高,也可以直接使用alert方法直接弹出提示框。

⑹ html 怎么点击一个按钮弹出一个提示框

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html,输入问题基础代码。

⑺ 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的以上两个函数。具体代码如下:

⑽ 前端,点击弹出一个新的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>