当前位置：首页 » 编程语言 » html5弹出框

html5弹出框

发布时间: 2021-03-26 13:49:09

1. html5弹出提示框，俩个选项，可以跳转的代码多少

if(like==true)
document.write("谢谢你的夸奖");//确定进入
else
window.close();//放弃进入

用脚本关闭窗口，这是IE允许的事版情，但其他权浏览器默认状态下未必允许。

2. html5左侧弹出菜单怎样实现

用html是做不出来的，必须得靠div+css结合javascript才能够做出来。

3. html5 怎么弹出确认窗口 html5不支持alert

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>confirm</title>
<script type="text/javascript">
function rec(){
var mymessage=confirm("试试");
if(mymessage==true)
{
document.write("1");
}
else
{
document.write("2");
}
}
</script>
</head>
<body>
<input name="button" type="button" onClick="rec()" value="点我" />
</body>
</html>

4. HTML5用Jquery弹出对话框问题

<!DOCTYPEhtml>
<html>
<head>
	<title>框</title>
	<metacharset="utf-8">
	<styletype="text/css">
		*{
			margin:0px;
			padding:0px;
		}
		#ul1>li{
			background:#555;
			color:#fff;
			float:left;
			list-style:none;
			width:4em;
			margin:1em;
			text-align:center;
			cursor:pointer;
		}
		.popBox1{
			margin:50pxauto;
			text-align:center;
			width:30em;
			border:1pxsolidred;
			background:rgb(245,230,230);
			z-index:1000;
			display:none;
		}
		.popBox1h4{
			margin:2em0em;
		}
		.popBox1span{
			display:inline-block;
			width:4.5em;
			line-height:2em;
			font-weight:bold;
			color:#fff;
			margin:1em1em;
			margin-bottom:3em;
			font-size:1em;
			background:rgb(201,65,65);
			border-radius:5px;
			cursor:pointer;
		}
		.clear{
			clear:both;
		}
	</style>
	<scripttype="text/javascript"src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

</head>
<body>
	<ulid="ul1">
		<li>敌法</li>
		<li>剑圣</li>
		<li>蝮蛇</li>
		<li>幻刺</li>
		<li>娜迦</li>
		<brclass="clear"/>
	</ul>
	<divclass="popBox1">
		<h4>确定要干掉</h4>
		<spanonclick="sureDelete(this)">确定</span><spanonclick="cancel(this)">取消</span>
	</div>
	<scripttype="text/javascript">
		$(document).ready(function(){

			$("#ul1>li").click(function(){
				vartxt=$(this).text();
				$(".popBox1").children("h4").text('你确定要干掉:'+txt);
				$(".popBox1").show();
			});
		});
		functionsureDelete(obj){
			$(obj).parent().hide();
		}
		functioncancel(obj){
			$(obj).parent().hide();
		}
	</script>
</body>
</html>

5. html5和css怎么实现点击按钮弹出框

<input id="test">提交</input>//提交按钮
<script type="text/javascript">
$("#test").click(function () {//点击事件
alert("hello,world!");//弹出的内容
});
</script >

6. HTML5，自定义弹出对话框怎么设置居中

<div class="mask"><div class="main">关闭</div></div>
.mask{position:fixed;left:0;right:0;top:0;bottom:0;font-size:0;text-align:center;background:rgba(0,0,0,0.8);}
.mask:after{content:"";height:100%;}
.mask:after,.main{display:inline-block;vertical-align:middle;}
.main{font-size:16px;}

7. HTML5页面的弹出框，手机输入法打开后遮住了弹出框，如何解决

因为是弹层的定位问题，如果定位为fixed，用户是无法向上滚动看到输入框了。如果定位为absolute，则用户就可以滑动页面向上看到输入框。这两种的形式都有一定不好的体验。可以通过js控制，当用户点击输入框的时候，把弹层网上移动一点，修改top值。

8. html5浮动层弹窗求教是html代码

<html>
<styletype="text/css">
.black_overlay{
display:none;
position:absolute;top:0%;
left:0%;
width:100%;
height:100%;
background-color:black;
z-index:1001;
-moz-opacity:0.8;
opacity:.80;
filter:alpha(opacity=80);
}
.white_content{
display:none;
position:absolute;
top:25%;left:25%;
width:50%;
height:50%;
padding:16px;
border:16pxsolidblack;
background-color:white;
z-index:1002;
overflow:auto
}
</style>
<scripttype="text/javascript">
</script>
<body>

<inputtype="button"text="弹出层"onClick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">

<divid="light"class="white_content">
<ahref="#"onClick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"style="color:black;z-index:9999">Close</a>
<divstyle="width:715px;height:360px;border:#cccsolid1px;"id="dituContent">

这里就是弹出的内容
</div>
</div>
</body>
</html>

就是这样的。使用postion属性和层的隐藏和显示就实现啦

9. html5如何实现弹出提示框，并且伴随遮罩层并且可以关闭弹出框

通过jquery的show()和hide()函数联合使用，实现弹出窗口。

一、show（）和hide（）函数解析：

1、show() 方法显示隐藏的被选元素。

注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。

2、hide() 方法隐藏被选元素。

这与 CSS 属性 display:none 类似，但是隐藏的元素不会被完全显示（不再影响页面的布局）。

二、设计一个HTML页面，包括一个简单的弹出窗，和一个显示按钮。其中，调用了jquery的以上两个函数。具体代码如下：

10. html点击按钮弹出窗口如何实现

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}

.firstBox h5 {
font-size: 30px;
color: #000;
font-weight: 700;
}

.firstBox table {
border: 1px solid #E6E6E6;
margin: 15px 0px;
}

.firstBox table thead {
background: #E6E6E6;
}

.firstBox table tr td {
width: 150px;
text-align: center;
}

.firstBox button {
width: 100px;
height: 40px;
background: #E6E6E6;
border: 1px solid #C7D3E6;
text-align: center;
line-height: 40px;
font-size: 16px;
color: #000;
cursor: pointer;
}

#twoBox {
margin: 20px 0px 0px;
background: #E6E6E6;
height: 250px;
width: 310px;
position: relative;
display: none;
}

#twoBox .twoBox_lever {
width: 290px;
height: 230px;
background: #fff;
border: 1px solid #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: 1px solid #ccc;
border-radius: 5px;
}

.twoBox_lever_two .two_title p {
font-size: 16px;
color: #000;
line-height: 40px;
padding-left: 10px;
font-weight: 700;
}

.twoBox_lever_two form {
width: calc(100% - 20px);
margin: 10px;
border-bottom: 1px solid #ccc;
height: calc(100% - 100px);
}

.twoBox_lever_two form input {
height: 20px;
line-height: 20px;
padding: 0px 10px;
margin: 5px;
cursor: pointer;
}

.twoBox_lever_two .two_footer {
height: 40px;
text-align: right;
padding-right: 10px;
}

.twoBox_lever_two .two_footer button {
height: 30px;
background: #E6E6E6;
border: 1px solid #C7D3E6;
text-align: center;
line-height: 30px;
font-size: 16px;
color: #000;
cursor: pointer;
}

.twoBox_lever_two .two_footer button:first-of-type {
width: 120px;
padding: 0px 10px;
}

.twoBox_lever_two .two_footer button:last-of-type {
width: 50px;
}

.show {
display: block !important;
}
</style>
</head>
<body>
<div style="margin:10px;">

<div class="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>
<button id="button">创建新用户</button>
</div>

<div id="twoBox">
<div class="twoBox_lever">
<div class="twoBox_lever_two">
<div class="two_title">
<p>创建新用户</p>
</div>
<form>
<label style="float:left">名字：
<input type="text" placeholder="请输入名字">
</label>
<label style="float:left">邮箱：
<input type="text" placeholder="请输入邮箱">
</label>
<label style="float:left">密码：
<input type="password" placeholder="请输入密码">
</label>
</form>
<div class="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>

阅读全文

html5弹出框

与html5弹出框相关的阅读推荐