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

sinat_37552373 2017-11-24 04:09:34
点击一个按钮,然后会出现一个弹窗,上面写提示内容,下面有确认和取消两个按钮,点确定会跳转页面。
最好发一些源码或者例子,谢谢
...全文
719 2 打赏 收藏 举报
写回复
2 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
前端-珊珊 2017-11-24
之前做的,不知道你要的是手机端还是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();
	})
  • 打赏
  • 举报
回复
天际的海浪 2017-11-24
窗就是个fixed/absolute定位的div, div初始设置为隐藏display: none;,点击按钮后让div显示出来:divObj.style.display = "block"
  • 打赏
  • 举报
回复
相关推荐
发帖
JavaScript
加入

8.6w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
申请成为版主
帖子事件
创建了帖子
2017-11-24 04:09
社区公告
暂无公告