js实现当前页面关闭功能

页面实现

<div>
	<input type="button" value="关闭当前页" class="close" onclick="closeWin()">
</div>

js的关闭方法

function closeWin(){
	//有关闭确认
	//if(confirm("您确定要关闭本页吗?")){
		window.opener=null;
		window.open('','_self');
		window.close();
	//}
}

关闭按钮的样式

.close{
	background-color: #f44336;
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	cursor: pointer;
	position:fixed;
	top:10px;
	right:5px;
}

//鼠标悬停时出现的阴影
.close:hover {
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

最终实现效果:
实现效果
在触摸屏并全屏显示的情况下,使用这个方式来关闭当前打开的页面是很好的方式。


2019.05.10 补充

  • 发现这个关闭的方法不是任何时候都有效的,只能在关闭子窗口或者点击链接打开的新窗口才有效。
相关推荐
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页