前端html网页，点击按钮或超链接弹出一个登陆的div窗口或者对话框

最新推荐文章于 2024-06-04 10:51:46 发布

lingle1

最新推荐文章于 2024-06-04 10:51:46 发布

阅读量1.8w

点赞数 16

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_42245375/article/details/102567797

版权

前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1.点击链接弹出一个可操作的div窗口代码效果图展示：

在这里插入图片描述
代码示例：

<!DOCTYPE> 
<html> 
    <head> 
        <title>点击文字弹出一个DIV层窗口代码</title> 
        <style> 
        .black_overlay{ 
            display: none; /* 此元素不会被显示*/
            position: absolute; 
            top: 0%; 
            left: 0%; 
            width: 100%; 
            height: 100%; 
            background-color: black; 
            z-index:1001; /* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。*/
            -moz-opacity: 0.8; 
            opacity:.80; /* opacity 属性设置元素的不透明级别。*/
            filter: alpha(opacity=88);  
			/* 所有浏览器都支持 opacity 属性。   注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。*/
        } 
        .white_content { 
            display: none; 
            position: absolute; 
            top: 25%; 
            left: 25%; 
            width: 55%; 
            height: 55%; 
            padding: 20px; 
            border: 10px solid orange; 
            background-color: white; 
            z-index:1002; 
            overflow: auto; 
        } 
    </style> 
    </head> 
    <body> 
        <p>示例弹出层：
			<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
				请点这里
			</a>
		</p> 
        <div id="light" class="white_content">
			这是一个层窗口示例程序. 
			<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">点这里关闭本窗口</a>
			</br>
			<!-- 登陆部分代码 -->
			<form action="1.html" method="post">
				用户名：<input type="text" name="" id="" value="" /></br>
				密码：<input type="password" name="" id="" value="" /></br>
				<input type="submit" value="提交"/>
			</form>
			
		</div> 
        <div id="fade" class="black_overlay"></div> 
    </body> 
</html>

2. 点击按钮弹出一个对话框

<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("我是一个消息框！")
}
</script>
</head>
<body>

<input type="button" onclick="disp_alert()" value="显示消息框" />

</body>
</html>

其他弹出窗口的方式，后续再做补充

lingle1

关注

16
点赞
踩
103

收藏

觉得还不错? 一键收藏
5
评论
前端html网页，点击按钮或超链接弹出一个登陆的div窗口或者对话框

1.点击链接弹出一个可操作的div窗口代码效果图展示：代码示例：<!DOCTYPE> <html> <head> <title>点击文字弹出一个DIV层窗口代码</title> <style> .black_overlay{ di...
复制链接

扫一扫