
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 150px;
height: 130px;
background: #3DCE3D;
text-align: center;
display: none;
position: absolute;
}
#box ul{
padding: 0;
}
#box li{
border-top: 1px solid seagreen;
list-style: none;
height: 25px;
line-height: 25px;
}
</style>
</head>
<body>
<!--
1、 出现alert弹出框
2. 选择是否离开 离开则关闭页面,取消则留在页面
3. 选中页面中的文字跳转百度搜索,如果没选中提示选中文字提示
4. 用户输入内容跳转搜索 ,取消则留在页面
-->
<div id="box">
<ul>
<li>这是弹出框</li>
<li>关闭页面</li>
<li>百度搜索</li>
<li>输入搜索内容</li>
</ul>
</div>
<div >
<ul>
<li>来个绿箭吧</li>
<li>关闭页面</li>
<li>百度搜索</li>
<li>输入搜索内容</li>
</ul>
</div>
<script>
var box=document.getElementById("box");
document.oncontextmenu = function (e) {
event.preventDefault();
var top= e.clientY;
var left= e.clientX;
box.style.left=left+'px';
box.style.top=top+'px';
box.style.display="block";
};
box.onmousedown=function (e) {
if (e.target.innerHTML=="这是弹出框") {
alert("呀,真的是弹出框");
box.style.display="none";
} else if (e.target.innerHTML=="关闭页面") {
var yes=confirm("确定要离开页面么?");
if (yes) {
window.close();
} else{
alert("欢迎留下");
box.style.display="none";
}
} else if (e.target.innerHTML=="百度搜索") {
var text=document.getSelection().toString();
if (text) {
window.open("https://www.baidu.com/s?wd="+text);
} else{
alert("请选择内容");
box.style.display="none";
}
}else if (e.target.innerHTML=="输入搜索内容") {
var yes=prompt("请输入你要搜索的内容");
if(yes){
window.open("https://www.baidu.com/s?wd="+yes);
}else{
box.style.display="none";
}
}else{
box.style.display="none";
}
}
</script>
</body>
</html>