用 js、html、css实现一个弹出提示控件
1. 分别实现类似于系统的 alert、confirm、prompt对话框；
2. 对话框大小根据提示内容进行自适应（有一个最小宽高），默认出现在页面的水平垂直居中的位置；
3. 对话框可拖动；
4. 对话框中的事件模拟系统对话框的事件（例如：alert 对话框，点击确定按钮，对话框消失）；
5. 解决IE6被 select控件遮挡的问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title>提示框</title>
<style>
html,p{margin:0;padding:0;line-height:30px;}
#tishi{
position:absolute;
left:600px;
min-height:150px;
border:1px solid black;
padding:10px 12px;
display:none;
background:#fff;
}
#title{
min-width:200px;
}
#close{
position:absolute;
right:15px;
top:10px;
cursor:pointer;
}
#content{
margin-top:10px;
min-height:70px;
padding:0 10px;
}
a{
width:60px;
line-height:30px;
float:right;
text-align:center;
cursor:pointer;
border:1px solid skyblue;
margin-right:5px;
border-radius:5px;
}
a:hover{
background:rgba(0,0,0,0.4);
color:#fff;
}
#answer{
display:none;
margin-top:30px;
margin-bottom:30px;
}
</style>
</head>
<body>
<select id='sel'>
<option>请选择</option>
<option>alert</option>
<option>confirm</option>
<option>prompt</option>
</select>
<div id='tishi'>
<p id='title'>网页来自于</p>
<p id='close'>X</p>
<p id='content'>ss</p>
<input type='text' id='answer'/>
<a id='cancel'>取消</a>
<a id='sure'>确定</a>
</div>
<script>
var oSel = document.getElementById('sel');
var oTishi = document.getElementById('tishi');
var title = document.getElementById('title');
var oContent = document.getElementById('content');
var suer = document.getElementById('sure');
var cancel = document.getElementById('cancel');
var answer = document.getElementById('answer');
var type = '';
function hide(obj){
obj.style.display = 'none';
}
//反转按钮的显示
function toggle(type){
oContent.style.display = (type=='prompt')?'none':'block';
answer.style.display = (type=='prompt')?'block':'none';
cancel.style.display = (type=='alert')?'none':'block';
}
//输入弹出框类型和内容
function show(type,content){
var result = '';
if(type == 'alert'){
cancel.style.display = 'none';
title.innerHTML = '这是alert信息:';
oContent.innerHTML = content || '你已经完成了所有练习！';
}else if(type == 'confirm'){
title.innerHTML = '这是confirm信息:';
oContent.innerHTML = content || '你确定完成提交试卷了吗？';
}else{
title.innerHTML = '请输入您的答案！';
}
sure.onclick = function(){
hide(oTishi);
if(type == 'confirm'){
result = true;
}else if(type == 'alert'){
return false
}else{
}
}
cancel.onclick = function(){
hide(oTishi);
if(type == 'confirm'){
result = false;
}
}
toggle(type);
oTishi.style.display = 'block';
//返回结果
return result;
}
//获取选中项文本
oSel.onchange = function(e){
var selType = oSel.options[oSel.selectedIndex].text;
show(selType);
}
//处理弹出框的拖拽
oTishi.onmousedown = function(e){
this.style.cursor = 'move';
var mouseX = e.pageX;
var mouseY = e.pageY;
var origionX = parseInt(getComputedStyle(oTishi,null).left);
var origionY = parseInt(getComputedStyle(oTishi,null).top);
var endLeft = mouseX-origionX;
var endTop = mouseY-origionY;
this.onmousemove = function(e){
var nowX = e.pageX;
var nowY = e.pageY;
var subX = nowX-mouseX;
var subY = nowY-mouseY;
if(nowX>endLeft && nowX<(document.documentElement.clientWidth-this.clientWidth+endLeft)){
this.style.left = origionX+subX + 'px';
}
if(nowY>endTop && nowY<(document.documentElement.clientHeight-this.clientHeight+endTop)){
this.style.top = origionY+subY + 'px';
}
}
}
oTishi.onmouseup = function(e){
this.onmousemove = null;
}
</script>
</body>
</html>
发表于 2017-08-06 04:04:12
回复(0)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
body{font-family:"Microsoft yahei"}
p,input{margin:0;padding:0;}
.p{font-size:15px;font-family:"Microsoft yahei";}
.div{position: absolute;display:none;width: 318px;background: rgb(251,251,251);border-radius:3px;border: 1px solid rgb(186,186,186);box-shadow: 0px 2px 2px #999;padding:15px 20px;}
.span{position:absolute;right:5px;top:5px;}
.div2{margin-top:28px;}
.ipt1{font-weight:bold;font-family:"Microsoft yahei";font-size:12px;border:1px solid rgb(59,123,237);padding:7px 23px;background:rgb(252,252,252);border-radius:2px;}
.ipt2{margin-left:10px;border:1px solid rgb(165,165,165);}
.act_ipt{border:1px solid rgb(59,123,237);}
.p1{font-size:12px;word-break:break-all;}
.p2{text-align:right;margin-top:25px;}
.ipt_text{width:100%;font-size:14px;padding:2px;border:1px solid rgb(59,123,237);}
.p1_2{margin-top:10px;}
</style>
</head>
<body>
<input type="button" value="alert"/>
<input type="button" value="confirm"/>
<input type="button" value="prompt"/>
<div id="div1" class="div">
<p class="p">JavaScript 提醒</p>
<span class="span" id="span1"><img src="images/1.png"/></span>
<div class="div2" id="div2">
</div>
</div>
<script>
var oDiv=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var oSpan1=document.getElementById('span1');
var aIpt=document.getElementsByTagName('input');
function t(obj)
{
obj.onmousedown=function(ev){
var choose=ev||event;
var disX=choose.clientX-obj.offsetLeft;
var disY=choose.clientY-obj.offsetTop;
function mouseMove(ev){
var choose=ev||event;
var l=choose.clientX-disX;
var t=choose.clientY-disY;
if(l<0){l=0;}
else if(l>document.documentElement.clientWidth-obj.offsetWidth){l=document.documentElement.clientWidth-obj.offsetWidth;};
if(t<0){t=0}
else if(t>document.documentElement.clientHeight-obj.offsetHeight)
{t=document.documentElement.clientHeight-obj.offsetHeight};
obj.style.left=l+'px';
obj.style.top=t+'px';
obj.style.margin=0;
}
function mouseUp(){
this.onmousemove=null;
this.onmouseup=null;
if(obj.releaseCapture){obj.releaseCapture();}
}
if(obj.setCapture){
obj.onmousemove=mouseMove;
obj.onmouseup=mouseUp;
obj.setCapture();
}
else{document.onmousemove=mouseMove;
document.onmouseup=mouseUp;
}
return false;
}
}
for(var i=0;i<aIpt.length;i++)
{
aIpt[i].onclick=function()
{
if(this.value=="alert")
{
oDiv2.innerHTML="<p class='p1'>1111111111</p><p class='p2'><input id='click' class='ipt1' type='button' value='确定'/></p><!--[if IE 6]><iframe style='position:absolute;width:100%; height:100%;_filter:alpha(opacity=0);opacity=0;border-style:none;'></iframe><![endif]-->";
var c=document.getElementById('click');
c.onclick=function()
{
oDiv.style.display="none";
}
}
if(this.value=="confirm")
{
oDiv2.innerHTML="<p class='p1'>您确定要离开本页吗？</p><p class='p2'><input id='click2' class='ipt1 ipt2 act_ipt' type='button' value='确定'/><input id='click3' class='ipt1 ipt2' type='button' value='取消'/></p><!--[if IE 6]><iframe style='position:absolute;width:100%; height:100%;_filter:alpha(opacity=0);opacity=0;border-style:none;'></iframe><![endif]-->";
var d=document.getElementById('click2');
var f=document.getElementById('click3');
d.onclick=function()
{
oDiv.style.display="none";
alert(true)
}
f.onclick=function()
{
oDiv.style.display="none";
alert(false)
}
}
if(this.value=="prompt")
{
oDiv2.innerHTML="<p class='p1'>您的姓名是？</p><p class='p1_2'><input type='text' class='ipt_text' id='text'/></p><p class='p2'><input id='click4' class='ipt1 ipt2' type='button' value='确定'/><input id='click5' class='ipt1 ipt2' type='button' value='取消'/></p><!--[if IE 6]><iframe style='position:absolute;width:100%; height:100%;_filter:alpha(opacity=0);opacity=0;border-style:none;'></iframe><![endif]-->";
var e=document.getElementById('click4');
var h=document.getElementById('click5');
var w=document.getElementById('text');
e.onclick=function()
{
oDiv.style.display="none";
alert(w.value)
}
h.onclick=function()
{
oDiv.style.display="none";
alert("")
}
oDiv.style.display="none";
}
with(oDiv.style)
{
display="block";
left="50%";
top="50%";
marginTop="-"+oDiv.offsetHeight/2+'px';
marginLeft="-"+oDiv.offsetWidth/2+'px';
}
oSpan1.onclick=function()
{
oDiv.style.display="none";
}
}
}
t(oDiv);
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8"/>
<style>
body{font-family:"Microsoft yahei"}
p,input{margin:0;padding:0;}
.p{font-size:15px;font-family:"Microsoft yahei";}
.div{position: absolute;display:none;width: 318px;background: rgb(251,251,251);border-radius:3px;border: 1px solid rgb(186,186,186);box-shadow: 0px 2px 2px #999;padding:15px 20px;}
.span{position:absolute;right:5px;top:5px;}
.div2{margin-top:28px;}
.ipt1{font-weight:bold;font-family:"Microsoft yahei";font-size:12px;border:1px solid rgb(59,123,237);padding:7px 23px;background:rgb(252,252,252);border-radius:2px;}
.ipt2{margin-left:10px;border:1px solid rgb(165,165,165);}
.act_ipt{border:1px solid rgb(59,123,237);}
.p1{font-size:12px;word-break:break-all;}
.p2{text-align:right;margin-top:25px;}
.ipt_text{width:100%;font-size:14px;padding:2px;border:1px solid rgb(59,123,237);}
.p1_2{margin-top:10px;}
</style>
</head>
<body>
<input type="button" value="alert"/>
<input type="button" value="confirm"/>
<input type="button" value="prompt"/>
<div id="div1" class="div">
<p class="p">JavaScript 提醒</p>
<span class="span" id="span1"><img src="images/1.png"/></span>
<div class="div2" id="div2">
</div>
</div>
<script>
var oDiv=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var oSpan1=document.getElementById('span1');
var aIpt=document.getElementsByTagName('input');
function t(obj)
{
obj.onmousedown=function(ev){
var choose=ev||event;
var disX=choose.clientX-obj.offsetLeft;
var disY=choose.clientY-obj.offsetTop;
function mouseMove(ev){
var choose=ev||event;
var l=choose.clientX-disX;
var t=choose.clientY-disY;
if(l<0){l=0;}
else if(l>document.documentElement.clientWidth-obj.offsetWidth){l=document.documentElement.clientWidth-obj.offsetWidth;};
if(t<0){t=0}
else if(t>document.documentElement.clientHeight-obj.offsetHeight)
{t=document.documentElement.clientHeight-obj.offsetHeight};
obj.style.left=l+'px';
obj.style.top=t+'px';
obj.style.margin=0;
}
function mouseUp(){
this.onmousemove=null;
this.onmouseup=null;
if(obj.releaseCapture){obj.releaseCapture();}
}
if(obj.setCapture){
obj.onmousemove=mouseMove;
obj.onmouseup=mouseUp;
obj.setCapture();
}
else{document.onmousemove=mouseMove;
document.onmouseup=mouseUp;
}
return false;
}
}
for(var i=0;i<aIpt.length;i++)
{
aIpt[i].onclick=function()
{
if(this.value=="alert")
{
oDiv2.innerHTML="<p class='p1'>1111111111</p><p class='p2'><input id='click' class='ipt1' type='button' value='确定'/></p><!--[if IE 6]><iframe style='position:absolute;width:100%; height:100%;_filter:alpha(opacity=0);opacity=0;border-style:none;'></iframe><![endif]-->";
var c=document.getElementById('click');
c.onclick=function()
{
oDiv.style.display="none";
}
}
if(this.value=="confirm")
{
oDiv2.innerHTML="<p class='p1'>您确定要离开本页吗？</p><p class='p2'><input id='click2' class='ipt1 ipt2 act_ipt' type='button' value='确定'/><input id='click3' class='ipt1 ipt2' type='button' value='取消'/></p><!--[if IE 6]><iframe style='position:absolute;width:100%; height:100%;_filter:alpha(opacity=0);opacity=0;border-style:none;'></iframe><![endif]-->";
var d=document.getElementById('click2');
var f=document.getElementById('click3');
d.onclick=function()
{
oDiv.style.display="none";
alert(true)
}
f.onclick=function()
{
oDiv.style.display="none";
alert(false)
}
}
if(this.value=="prompt")
{
oDiv2.innerHTML="<p class='p1'>您的姓名是？</p><p class='p1_2'><input type='text' class='ipt_text' id='text'/></p><p class='p2'><input id='click4' class='ipt1 ipt2' type='button' value='确定'/><input id='click5' class='ipt1 ipt2' type='button' value='取消'/></p><!--[if IE 6]><iframe style='position:absolute;width:100%; height:100%;_filter:alpha(opacity=0);opacity=0;border-style:none;'></iframe><![endif]-->";
var e=document.getElementById('click4');
var h=document.getElementById('click5');
var w=document.getElementById('text');
e.onclick=function()
{
oDiv.style.display="none";
alert(w.value)
}
h.onclick=function()
{
oDiv.style.display="none";
alert("")
}
oDiv.style.display="none";
}
with(oDiv.style)
{
display="block";
left="50%";
top="50%";
marginTop="-"+oDiv.offsetHeight/2+'px';
marginLeft="-"+oDiv.offsetWidth/2+'px';
}
oSpan1.onclick=function()
{
oDiv.style.display="none";
}
}
}
t(oDiv);
</script>
</body>
</html>
发表于 2015-01-24 16:01:10
回复(2)
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title>提示框</title>
<style>
html,p{margin:0;padding:0;line-height:30px;}
#tishi{
position:absolute;
left:600px;
min-height:150px;
border:1px solid black;
padding:10px 12px;
display:none;
background:#fff;
}
#title{
min-width:200px;
}
#close{
position:absolute;
right:15px;
top:10px;
cursor:pointer;
}
#content{
margin-top:10px;
min-height:70px;
padding:0 10px;
}
a{
width:60px;
line-height:30px;
float:right;
text-align:center;
cursor:pointer;
border:1px solid skyblue;
margin-right:5px;
border-radius:5px;
}
a:hover{
background:rgba(0,0,0,0.4);
color:#fff;
}
#answer{
display:none;
margin-top:30px;
margin-bottom:30px;
}
</style>
</head>
<body>
<select id='sel'>
<option>请选择</option>
<option>alert</option>
<option>confirm</option>
<option>prompt</option>
</select>
<div id='tishi'>
<p id='title'>网页来自于</p>
<p id='close'>X</p>
<p id='content'>ss</p>
<input type='text' id='answer'/>
<a id='cancel'>取消</a>
<a id='sure'>确定</a>
</div>
<script>
var oSel = document.getElementById('sel');
var oTishi = document.getElementById('tishi');
var title = document.getElementById('title');
var oContent = document.getElementById('content');
var suer = document.getElementById('sure');
var cancel = document.getElementById('cancel');
var answer = document.getElementById('answer');
var type = '';
function hide(obj){
obj.style.display = 'none';
}
//反转按钮的显示
function toggle(type){
oContent.style.display = (type=='prompt')?'none':'block';
answer.style.display = (type=='prompt')?'block':'none';
cancel.style.display = (type=='alert')?'none':'block';
}
//输入弹出框类型和内容
function show(type,content){
var result = '';
if(type == 'alert'){
cancel.style.display = 'none';
title.innerHTML = '这是alert信息:';
oContent.innerHTML = content || '你已经完成了所有练习！';
}else if(type == 'confirm'){
title.innerHTML = '这是confirm信息:';
oContent.innerHTML = content || '你确定完成提交试卷了吗？';
}else{
title.innerHTML = '请输入您的答案！';
}
sure.onclick = function(){
hide(oTishi);
if(type == 'confirm'){
result = true;
}else if(type == 'alert'){
return false
}else{
}
}
cancel.onclick = function(){
hide(oTishi);
if(type == 'confirm'){
result = false;
}
}
toggle(type);
oTishi.style.display = 'block';
//返回结果
return result;
}
//获取选中项文本
oSel.onchange = function(e){
var selType = oSel.options[oSel.selectedIndex].text;
show(selType);
}
//处理弹出框的拖拽
oTishi.onmousedown = function(e){
this.style.cursor = 'move';
var mouseX = e.pageX;
var mouseY = e.pageY;
var origionX = parseInt(getComputedStyle(oTishi,null).left);
var origionY = parseInt(getComputedStyle(oTishi,null).top);
var endLeft = mouseX-origionX;
var endTop = mouseY-origionY;
this.onmousemove = function(e){
var nowX = e.pageX;
var nowY = e.pageY;
var subX = nowX-mouseX;
var subY = nowY-mouseY;
if(nowX>endLeft && nowX<(document.documentElement.clientWidth-this.clientWidth+endLeft)){
this.style.left = origionX+subX + 'px';
}
if(nowY>endTop && nowY<(document.documentElement.clientHeight-this.clientHeight+endTop)){
this.style.top = origionY+subY + 'px';
}
}
}
oTishi.onmouseup = function(e){
this.onmousemove = null;
}
</script>
</body>
</html>
发表于 2024-06-06 13:43:12
回复(0)
<!DOCTYPE html>
<html>
<head>
<title>弹出提示控件</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
position: relative;
}
#alertdlg,#confirmdlg,#promptdlg{
width: 400px;
height: 180px;
position: absolute;
top:100px;
left: 50%;
margin-left: -200px;
border:1px solid black;
border-radius: 2px;
box-shadow:1px 1px gray;
display: none;
}
#alertdlg p span,#confirmdlg p span ,#promptdlg p span{
display: inline-block;
float: right;
margin-right: 5px;
cursor: pointer;
}
#alertdlg>p , #confirmdlg>p , #promptdlg>p{
padding:10px 0px 10px 10px;
}
.msg p{
margin: 40px 0px 20px 30px;
}
#promptdlg .msg p {
margin: 10px 0px 10px 20px;
}
#promptdlg input{
width: 90%;
height: 25px;
margin-left: 20px;
}
#alertdlg button ,#confirmdlg button ,#promptdlg button{
float: right;
margin-right: 25px;
width: 60px;
height: 30px;
margin-top: 15px;
}
</style>
</head>
<body>
<div>
<button
onclick="btn_alert()">alert：警告对话框</button>
<button
onclick="btn_confirm()">confirm：确定操作对话框</button>
<button
onclick="btn_prompt()">prompt：用户输入对话框</button>
</div>
<div id="alertdlg">
<p>警告对话框:<span
class="cancel">X<span></p>
<div
class="msg"><p>常用于输出一些提示信息</P></div>
<button
class="confirmbtn">确定</button>
</div>
<div id="confirmdlg">
<p>确定操作<span
class="cancel">X<span></p>
<div
class="msg"><P>这是确定操作对话框，提供两个按钮供用户选择</P></div>
<button
class="confirmbtn">确定</button>
<button
class="cancelbtn">取消</button>
</div>
<div id="promptdlg">
<p>警告:<span
class="cancel">X<span></p>
<div class="msg">
<P>这是一个提示信息</P>
<input type="text"
placeholder="请用户输入：">
</div>
<button
class="confirmbtn">确定</button>
<button
class="cancelbtn">取消</button>
</div>
<script type="text/javascript">
var alertdlg = document.getElementById("alertdlg");
var confirmdlg =
document.getElementById("confirmdlg");
var promptdlg =
document.getElementById("promptdlg");
function btn_alert(){
alertdlg.style.display = "block";
confirmdlg.style.display = "none";
promptdlg.style.display = "none";
}
function btn_confirm(){
confirmdlg.style.display = "block";
alertdlg.style.display = "none";
promptdlg.style.display = "none";
}
function btn_prompt(){
promptdlg.style.display = "block";
alertdlg.style.display = "none";
confirmdlg.style.display = "none";
}
var confirmbtn =
document.getElementsByClassName("confirmbtn");
for(var i = 0; i < confirmbtn.length; i++){
confirmbtn[i].addEventListener("click",function(){
alertdlg.style.display = "none";
confirmdlg.style.display = "none";
promptdlg.style.display = "none";
})
}
var cancelbtn =
document.getElementsByClassName("cancelbtn");
for(var i = 0; i < cancelbtn.length; i++){
cancelbtn[i].addEventListener("click",function(){
alertdlg.style.display = "none";
confirmdlg.style.display = "none";
promptdlg.style.display = "none";
})
}
var span = document.getElementsByTagName("span");
for(var i = 0; i < span.length; i++){
span[i].addEventListener("click",function(){
alertdlg.style.display = "none";
confirmdlg.style.display = "none";
promptdlg.style.display = "none";
})
}
function moveDlg(obj){
obj.onmousedown = function(e){
var choose = e||event;
var disX = choose.clientX -
obj.offsetLeft;//鼠标点击的位置距离对话框左边的距离
var disY = choose.clientY -
obj.offsetTop;//鼠标点击的位置距离对话框顶的距离
function mouseMove(e){
var choose = e||event;
var l = choose.clientX -
disX;//用来判断移动的距离是否到达边框最左侧
var t = choose.clientY - disY;
if(l < 0){
l = 0; //使得边框在最左边，不至于超出屏幕
}else if(l >
document.documentElement.clientWidth - obj.offsetWidth){
l=document.documentElement.clientWidth-obj.offsetWidth;//边框移到最右边的时候
}
if(t < 0){
t = 0;
}else if(t >
document.documentElement.clientHeight - obj.offsetHeight){
t = document.documentElement.clientHeight -
obj.offsetHeight;
}
obj.style.left = l + "px";
obj.style.top = t + "px";
obj.style.margin = 0;
}
function mouseUp(){
this.onmousemove = null;
this.onmouseup = null;
if(obj.releaseCapture){
obj.releaseCapture();
}
}
if(obj.setCapture){
obj.onmousemove = mouseMove;
obj.onmouseup = mouseUp;
obj.setCapture();
}
else{
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
}
return false;
}
}
moveDlg(alertdlg);
moveDlg(confirmdlg);
moveDlg(promptdlg);
</script>
</body>
</html>
发表于 2017-06-13 11:08:56
回复(0)
问题信息
-
扫描二维码，关注牛客网
- 意见反馈
-
下载牛客APP，随时随地刷题
扫一扫，把题目装进口袋
- 求职之前，先上牛客
-
扫描二维码，进入QQ群
扫描二维码，关注牛客公众号
- 公司地址：北京市朝阳区北苑路北美国际商务中心K1座一层-北京牛客科技有限公司
- 联系方式：010-60728802 投诉举报电话：010-57596212（朝阳人力社保局）
- 牛客科技© All rights reserved admin@nowcoder.com
- 京ICP备14055008号-4 增值电信业务经营许可证 营业执照 人力资源服务许可证
-
京公网安备
11010502036488号
