使用html、css、js制作一个简单且草率的弹出提示框_html提示框-程序员宅基地

对于刚接触html5和css3的新手来说，alert弹出窗弊端不仅会阻止程序的执行，并且看起来十分简陋，不美观，视觉效果和实用性都不好，所以今天我将为大家展示：如何使用html和css、js制作一个简单的弹出窗。

首先是html结构，一个弹窗，一个按钮

<div class="window_bg">
    <!-- 弹窗内容 -->
	<div class="window_content">
		<p id="window_text">弹窗的内容....</p>
		<div class="btnBox">
			<div style="border-right: 1px solid;" onclick="isNo()">否</div>
			<div onclick="isYes()">是</div>
		</div>
	</div>
</div>
<button type="button" onclick="show()">显示弹窗</button>

然后是css，设置背景，弹窗样式

            /* 暗色背景 */
	        .window_bg{
	        /* 默认隐藏 */
		    display: none;
				/* 固定定位 */
				position: fixed;
				/* 设置层级 */
				z-index: 1;
				/* 背景铺满全屏 */
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				overflow: auto;
				background-color: rgba(0, 0, 0, 0.4);
			}
			.window_content {
			    background-color: #fefefe;
			    margin: 15% auto; 
			    padding: 20px;
			    border: 1px solid #888;
			    width: 40%; 
			}
			#window_text {
				padding: 20px;
				height: 30px;
			}
			
			.btnBox {
				width: 100%;
				height: 30%;
				border-top: 1px solid;
				display: flex;
			}
			
			.btnBox>div {
				width: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

呈现的结果大致就是这样啦（可以依个人需求随意调整弹窗样式）：

最后是js

//获取弹窗
let window_bg = document.getElementsByClassName("window_bg")[0]
// “否”按钮
function isNo() {
	window_bg.style.display = "none"
}
// “是”按钮
function isYes(){
	window_bg.style.display = "none"
    //可根据需要调整事件
	window.location.href = "./login.html"
}
//点击弹窗外部可隐藏弹窗
window.onclick = function(event){
	if(event.target == window_bg){
		event.target.style.display = "none"
	}
}
// 点击按钮显示弹窗
function show(){
	window_bg.style.display = "block"
}

根据个人需要可调整弹窗的事件

（ps：本篇为纯新手打造，恳请大佬多多批评）

本文链接：https://blog.csdn.net/Z_B_L/article/details/132782137

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

从零开始，搭建博客系统MVC5+EF6搭建框架（4）上,前后台页面布局页面实现，介绍使用的UI框架以及JS组件...-程序员宅基地

文章浏览阅读57次。一、博客系统进度回顾以及页面设计 1.1页面设计说明紧接前面基础基本完成了框架搭建，现在开始设计页面，前台页面设计我是模仿我博客园的风格来设计的，后台是常规的左右布局风格。 1.2前台页面风格主页面：技术博客风格：详情页风格：详情页留言风格： 1.3后台风格：表格风格：博客发布风格：以上看到的系统页面是目前系统完成的风格，以后页面设计都参考这..._水平导航ui布局的后台前端页面

const_cast-程序员宅基地

文章浏览阅读64次。也许大家都有过这样的疑惑：const_cast可以去除一个常量的const属性，去除const属性后应该可以对“常量”进行修改，通过调试器发现内存中的值是被改变的，可是再传递这个“常量”的时候，值却一直保持原状，实在古怪，在Windows下用VC、尝试如此，在Linux下用g++尝试也如此，我原先以为和编译器的优化选项有关系，把所有优化选项关闭，照样没用，为什么？写了个程序进行测试：..._linux const_cast

Required request body is missing 错误解决，400状态码_msg": "缺少request body!", "status": 400-程序员宅基地

文章浏览阅读2.6k次。Required request body is missing 错误解决，会出现400错误发送对象参数，使用requestBody接收参数postman请求时，使用json格式参数注意使用的是post请求，还是get请求。当你定义接收post请求，在postman中使用get请求时..._msg": "缺少request body!", "status": 400

Exchange13/16启用垃圾邮件功能及白名单设置-程序员宅基地

文章浏览阅读1.6k次。1、以管理员权限运行exchange的powershell2 、启用反垃圾邮件功能X\:ExchangeInstallPath\Scripts\Install-AntiSpamAgents.ps1注如果输入之后提示重启传输服务则证明启用是成功的3、重启传输服务运行以下命令Restart-Service MSExchangeTransport注：Exchange2016的话要重启前..._exchange邮箱如何加白名单

发送邮件被对方服务器退回_如何更好地给老外发邮件，可以了解下-程序员宅基地

文章浏览阅读738次。做外贸的朋友经常会发现自己发送的邮件被退回了，邮件为什么会被退回?收到被退回的邮件要具体分析，退回的信件一般都会有简短的说明，结合这些说明你可以进一步了解具体的退信原因并作出相应处理。下面列举了可能存在的退信原因，及解决方法，各位朋友可以做个参考！●收件地址不存在错误原因: 收件人邮箱帐号不存在或收件方服务器无法找到收件人邮件地址关键字：user not found，Invalid ad..._报价单太大发不成功到老外服务器怎么办

BS与CS-程序员宅基地

文章浏览阅读73次。B/S架构是浏览器与服务器的结构浏览器可以说是瘦客户端不需要装任何软件因为所有操作和界面都是即时从服务器获取也就是当系统需要更新时也不需要发布任何补丁，这种架构将运算负担加给服务器一般用于企业级开发。C/S架构就是客户端与服务器了如游戏等将数据的运算负担主要加给用户端的主机与服务器间做数据的通信需要编写两个系统一个客户端一个服务器端并且有更新时必须发布补丁给所有客户端安装...