js弹出层如何在增加确定和取消按钮？
下面弹出层直接会消失当你点击某个城市名后
如何在修改一下代码使得在弹出层选完城市后不直接消失
而是需要增加两个按钮。确定和取消。
只有当点击了确定或取消 弹出层才消失。
谢谢
<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>
<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()之类的)
以下是我写的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();
