js弹出层如何在增加确定和取消按钮？

下面弹出层直接会消失当你点击某个城市名后如何在修改一下代码使得在弹出层选完城市后不直接消失而是需要增加两个按钮。确定和取消。只有当点击了确定或取消弹出层才消失。谢谢<ht... 下面弹出层直接会消失当你点击某个城市名后

如何在修改一下代码使得在弹出层选完城市后不直接消失
而是需要增加两个按钮。确定和取消。
只有当点击了确定或取消弹出层才消失。

谢谢

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>µه�</title>
<style type="text/css">
*{ padding:0; margin:0; list-style-type:none;}
body{font-family: "̎ͥ";font-size: 12px;}
#t_con{ width:460px; line-height:20px; color:#00F; cursor:pointer; margin:20px auto 0 auto; border:1px #09C dashed; text-align:center;}
#t_area1{ width:268px; height:118px;overflow:hidden; border:2px #09C solid; background-color:#F1F9FC; margin:10px auto; padding-bottom:10px;display:none; }
#t_area{ width:268px; height:118px;overflow:hidden; border:2px #09C solid; background-color:#F1F9FC; margin:10px auto; padding-bottom:10px;display:none; }
#t_area ul{ margin:10px 0;}
#t_area li{ width:60px; height:18px; float:left; display:inline; text-align:center; line-height:18px; margin:4px auto auto 5px; }
#t_area li a{ color:#fff; text-decoration:none;}
#t_area li a:hover,a:active{ color:#fff; text-decoration:underline;}

</style>
<script type="text/javascript">
function showarea(){
var con = document.getElementById("t_area");
var arealist = con.getElementsByTagName("li");
var g = document.getElementById("t_con");
var val2 = "seeeeeee";
con.style.display = "block";
for (var i=0;i<arealist.length;i++){
arealist[i].onmouseover = function(){this.style.backgroundColor = "red"}
arealist[i].onmouseout = function(){this.style.backgroundColor = "#F1F9FC"}
arealist[i].onclick = function(){
g.innerHTML = this.innerHTML ;
document.getElementById("textnew").innerHTML=g.innerHTML;//赋值给下面一个form的值
document.getElementById("ttt").value = document.getElementById("t_con").innerHTML; //赋值给下面一个form的值

con.style.display = "none";
}
}

}
function offarea(){ //dissappeared when mouse move out this div
var con = document.getElementById("t_area");
con.style.display = "none";
}
var timer;
</script>
</head>
<body>
<div id="t_con" onClick="showarea();clearTimeout(timer);return false;" onmouseout="timer=setTimeout('offarea()',3500);">
选一个吧 </div>
<div id="t_area" onmouseover="showarea() ;clearTimeout(timer);return false;" onmouseout="offarea();clearTimeout(timer)">
<ul>
<li>四川</li>
<li>上海</li>
<li>北京那个</li>
<li>香港</li>
</ul> 展开

 我来答

2个回答

#合辑# 面试问优缺点怎么回答最加分？

tenderlitch
2013-04-18 · TA获得超过174个赞

知道小有建树答主

回答量：72

采纳率：0%

帮助的人：118万

我也去答题访问个人页

关注

展开全部

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>μ??</title>
<style type="text/css">
*{ padding:0; margin:0; list-style-type:none;}
body{font-family: "??";font-size: 12px;}
#t_con{ width:460px; line-height:20px; color:#00F; cursor:pointer; margin:20px auto 0 auto; border:1px #09C dashed; text-align:center;}
#t_area1{ width:268px; height:118px;overflow:hidden; border:2px #09C solid; background-color:#F1F9FC; margin:10px auto; padding-bottom:10px;display:none; }
#t_area{ width:268px; height:118px;overflow:hidden; border:2px #09C solid; background-color:#F1F9FC; margin:10px auto; padding-bottom:10px;display:none; }
#t_area ul{ margin:10px 0;}
#t_area li{ width:60px; height:18px; float:left; display:inline; text-align:center; line-height:18px; margin:4px auto auto 5px; }
#t_area li a{ color:#fff; text-decoration:none;}
#t_area li a:hover,a:active{ color:#fff; text-decoration:underline;}
</style>
<script type="text/javascript">
function showarea(){
    var con = document.getElementById("t_area");
    var arealist = con.getElementsByTagName("li");
    var g = document.getElementById("t_con");
    var val2 = "seeeeeee";
    con.style.display = "block";
    for (var i=0;i<arealist.length;i++){
    arealist[i].onmouseover = function(){this.style.backgroundColor = "red"}
    arealist[i].onmouseout = function(){this.style.backgroundColor = "#F1F9FC"}
    arealist[i].onclick = function(){
             //g.innerHTML = this.innerHTML ;
        //document.getElementById("textnew").innerHTML=g.innerHTML;//赋值给下面一个form的值
    //document.getElementById("ttt").value  = document.getElementById("t_con").innerHTML;      //赋值给下面一个form的值
document.getElementById("selected").value=this.innerHTML ;
//con.style.display = "none";
            }
        }
               
    }
function offarea(){      //dissappeared when mouse move out this div
    var con = document.getElementById("t_area");
    con.style.display = "none";
    }
var timer;
//新增的方法
function comfirm(){
    var g = document.getElementById("t_con");
    g.innerHTML = document.getElementById("selected").value;
    offarea();
}
</script>
</head>
<body>
<div id="t_con" onClick="showarea();clearTimeout(timer);return false;" onmouseout="timer=setTimeout('offarea()',3500);">
 选一个吧 </div>
<div id="t_area" onmouseover="showarea() ;clearTimeout(timer);return false;" onmouseout="offarea();clearTimeout(timer)">
    <ul>
        <li>四川</li>
       <li>上海</li>
        <li>北京那个</li>
       <li>香港</li>
    </ul>
    <!-- 新增的按钮-->
    <button onclick="comfirm()">确定</button><button onclick="offarea()">取消</button>
    </div>
<!-- 新增的隐藏域，用来保存当前选择的城市-->
<input type="hidden" id="selected"/>
</body>

更多追问追答
追问
　　谢谢tenderlitch的答复，不过在选择完以后，在点击确定以前。被选中的城市没有被高亮显示，这个该怎么修改 ，按钮能改成这样的吗？​


追答
按钮样式你可以自己在网上找个漂亮的背景图片。

追问
按钮已经改好了。但是一直没成功使得选中的城市高亮显示
也就是在点击城市名后，移开鼠标。选中的城市名保持高亮
这个该怎么修改？？
 


追答

上面给的附件里已经实现了选中后一直保持高亮呀，你去看看
追问

谢谢tenderlitch，确实效果做出来了。看你的代码确实学到了不少东西。
有个问题我先追问。能否有最简单的代码将跳出的 t_area 抖动几下或者淡入的效果
同时在现在完后跟新 t_con的时候div  t_con也抖动一下？？？也就是增加点效果。看起来醒目点
追答
很多现成的框架都有这功能啦，我自己比较习惯用jQuery。给你个例子，里边有些注释，希望对你有帮助。(引入jQuery之后你的一些js代码都可以替换成简介的jQuery方法啦，比如切换css class只要.toggleClass()之类的)

已赞过 已踩过<

评论收起

百度网友861de7d5ca8
2015-08-10 · TA获得超过2.3万个赞

知道小有建树答主

回答量：1497

采纳率：90%

帮助的人：112万

我也去答题访问个人页

关注

展开全部

以下是我写的js代码可以实现这个要求：

//半通明遮罩
document.writeln("");
var divGg = document.getElementById("divGg");
//弹出层
document.writeln("<div id="\"divAdMsg\"" left:0px;position:absolute;height:307px;="" width:450px;display:none;background-color:#fff;\"="">关闭弹出层");
var divAdMsg = document.getElementById("divAdMsg");
//显示打开弹出层内容
function showAdMsg()
{
    if(divAdMsg)
    {
        divAdMsg.style.display = "";
        divAdMsg.style.top = document.documentElement.scrollTop + parseInt((document.documentElement.clientHeight - divAdMsg.offsetHeight) / 2) + "px";
        divAdMsg.style.left = document.documentElement.scrollLeft + parseInt((document.documentElement.clientWidth - divAdMsg.offsetWidth) / 2) + "px";
        divGg.style.width = document.body.offsetWidth + "px";
        if(document.body.offsetHeight < document.documentElement.scrollTop + document.documentElement.clientHeight)
            divGg.style.height = document.documentElement.scrollTop + document.documentElement.clientHeight + "px";
        else
            divGg.style.height = document.body.offsetHeight + "px";
        divGg.style.display = "";
    }
}
//关闭打开弹出层内容
function closeAdMsg()
{
    divAdMsg.style.display = "none";
    divGg.style.display = "none";
}
showAdMsg();

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

您可能关注的内容

js防水乳液，淘宝双旦心意礼-新年大促，盛宴来袭!

js防水乳液，淘宝双旦狂欢开启，上淘宝，爱在心意礼!淘宝一下，美好生活触手可及!购好物，上淘宝!大牌精选，全球好物，淘，我喜欢!

simba.taobao.com广告

js弹出层如何在增加确定和取消按钮？

您可能关注的内容

其他类似问题

为你推荐：