js怎么做一个自定义弹窗啊

[sinat_37552373]

点击一个按钮，然后会出现一个弹窗，上面写提示内容，下面有确认和取消两个按钮，点确定会跳转页面。
最好发一些源码或者例子，谢谢

[天际的海浪]

窗就是个fixed/absolute定位的div， div初始设置为隐藏display: none;，点击按钮后让div显示出来：divObj.style.display = "block"

• 打赏
• 举报

回复 赞

[前端-珊珊]

之前做的，不知道你要的是手机端还是pc的。我就来个手机的吧

<!--弹出重新链接的弹框-->
				<div class="show_how_to_link"></div>
				<!--展示链接页面-->
				<div class="show_connect">
					<div class="show_tip">
						<p>定位失败，请重新定位！</p>
					</div>
					<div class="show_button">
						<div id="again_connect">
							<button id="again_position">确定</button>
						</div>
						<div id="cancel">
							<button id="cancel_position">取消</button>
						</div>
					</div>
				</div>




/*显示遮罩层*/
.show_how_to_link{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 209;
	background: rgba(0,0,0,0.2);
	display: none;
}
/*展示连接*/
.show_connect{
	width: 70%;
	height: 200px;
	background: #fff;
	position: absolute;
	z-index: 210;
	border-radius: 10px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: none;
}
/*展示tip*/
.show_tip{
	width: 100%;
	height: 70%;
	text-align: center;
	font-size: 20px;
	border-bottom: 1px solid #CDCDCD;
	display:table; 
}
/*展示tip文字居中*/
.show_tip>p{
	vertical-align:middle;   
  	display:table-cell;   
}
/*提交成功确定按钮*/
.show_button{
	width: 100%;
	height: 30%;
	text-align: center;
	overflow: hidden;
}
.show_button>div{
	width: 49.8%;
	height: 100%;
	float: left;
	text-align: center;
    background: #fff;  
}
#again_connect{
	 border-bottom-left-radius: 10px;
	border-right: 1px solid #CDCDCD;
}
#cancel{
	border-bottom-right-radius: 10px;
	
}
.show_button>div>button{
	width: 100%;
	height: 100%;
	border: none;
    outline: none;
    background: #fff;
    font-size: 16px;
    border-bottom-right-radius: 10px;	
    border-bottom-left-radius: 10px;
}
#again_position{
	color: #0A7046;
	font-weight: bold;
}
#cancel_position{
	color: #7F7F7F;
}

	//取消重新定位 
	$("#cancel_position").bind("click",function(){
		$(".show_how_to_link").hide();
		$(".show_connect").hide();
	})
	//重新定位
	$("#again_position").bind('click',function(){
		$(".show_how_to_link").hide();
		$(".show_connect").hide();
		window.location.href="";//这是写路径的
	})
	//点击遮罩层消失提示
	$(".show_how_to_link").bind("click",function(){
		$(".show_how_to_link").hide();
		$(".show_connect").hide();
	})

• 打赏
• 举报

回复 赞