首页 > 试题广场 >

用 js、html、css实现一个弹出提示控件。

[问答题]
用 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>
发表于 2015-01-24 16:01:10 回复(2)
<!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)