JS对话框
1.创建一个网页对话框：
1.1 用javascript标准的window.showModalDialog()或window.showModelessDialog()函数。ModalDialog为模态对话框，即必须先被处理的对话框，否则不能对网页进行其他操作，ModelessDialog为非模态对话框，可以对网页进行其他操作。
注意：本方法只被IE浏览器支持。
关键代码：window.showModelessDialog("form.html"",obj,"dialogWidth:200px;dialogHeight:100px”);
其中第一个参数是必选项，form.html是要显示在对话框里的内容，也可以是abc.txt文件。第二个参数是对话框包含的参数，第三个参数设置对话框的样式。第二第三都是可选项。
showModalDialog()的完整参数：http://www.blogjava.net/wangdetian168/archive/2010/09/24/332720.html
UsingDialog.html : (使用DialogContent.html作为对话框要显示的内容)
<html>
<head>
<script type="text/javascript">
var obj=new Object();
obj.name="51js";
window.showModelessDialog("form.html",obj,"dialogWidth:400px;dialogHeight:250px;resizable:yes");//the last parameter is not //effective,don't know why
</script>
<script type="text/javascript">
function showResult()
{
var obj=document.getElementById("selectColor");
var color=obj.options[obj.selectedIndex].text;//
alert("your favorite color is "+color);
}
function login()
{
}
</script>
</head>
<body>
<div>
<p>
let's choose color
</p>
choose your favorite color:
<select id="selectColor">
<option value="green" >green</option>
<option value="blue"selected="selected">blue</option>
<option value="yellow">yellow</option>
</select><br><br>
<input type="button" value="Done,submit" onclick="showResult()">
</div>
</body>
</html>
DialogContent.html :
<html>
<head>
<title>Welcome to this site</title>
<script type="text/javascript">
function login()
{
var uname=document.getElementById("uname").value;
var pwd=document.getElementById("pwd").value;
if(uname=="abc"&&pwd=="abc")
window.open("http:\\www.baidu.com","_blank");
else
document.getElementById("Msg").innerText="Invalid Username or Password !";
}
</script>
</head>
<body>
<div id="dialog" align="center">
<br>
<p>Welcome to this site !</p>
<form id="form1">
Your name : <input type="text" id="uname"/><br>
  Password : <input type="password" id="pwd"/><br><br>
<input type="button" value="Log In" onclick="login()"/>
</form>
</div>
<div align="center">
<p><a herf="http://www.baidu.com" target="_blank" onclick="window.close()"><font color="blue"><u>Register Now!</u></font></a></p>
<span id="Msg"></span>
</div>
</body>
</html>
1.2用JQuery的库来创建：
<html>
<head>
<title>first dialog</title>
<link rel="stylesheet" href="jquery-ui-1.8.18.custom/development-bundle/themes/base/jquery.ui.all.css">
<script src="jquery-ui-1.8.18.custom/js/jquery-1.7.1.min.js"></script>
<script src="jquery-ui-1.8.18.custom/development-bundle/external/jquery.bgiframe-2.1.2.js"></script>
<script src="jquery-ui-1.8.18.custom/development-bundle/ui/jquery.ui.core.js"></script>
<script src="jquery-ui-1.8.18.custom/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="jquery-ui-1.8.18.custom/development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="jquery-ui-1.8.18.custom/development-bundle/ui/jquery.ui.draggable.js"></script>
<script src="jquery-ui-1.8.18.custom/development-bundle/ui/jquery.ui.position.js"></script>
<script src="jquery-ui-1.8.18.custom/development-bundle/ui/jquery.ui.resizable.js"></script>
<script src="jquery-ui-1.8.18.custom/development-bundle/ui/jquery.ui.dialog.js"></script>
<link rel="stylesheet" href="jquery-ui-1.8.18.custom/development-bundle/demos/demos.css">
<script type="text/javascript">
$(function(){$("#dialog").dialog()});
</script>
</head>
<body>
<div id="dialog">
<p>trying...</p>
<form id="form1">
Your name:<input type="text" name="uname"/><br>
Your Password:<input type="text" name="pwd"/><br>
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
关键代码：
<script type="text/javascript">
$(function(){$("#dialog").dialog()});
</script>
其中#dialog是html文档中自定义的id为dialog的元素，在以上代码中它是一个div,<div id="dialog">
1.3用window.open()函数实现弹出窗口（但不是对话框）
http://wenku.baidu.com/view/2e7ca41c227916888486d7ae.html
<script type="text/javascript">
function openWindow(){
window.open ('http://www.baidu.com', 'newwindow', 'height=500px, width=800px, top=100px, left=100px, toolbar=yes, menubar=yes, scrollbars=no, resizable=yes,location=no, status=yes');
}
</script>
2.获取下拉框select被选中的项的value和显示的文本
<script type="text/javascript">
function showResult()
{
var obj=document.getElementById("selectColor");
var color=obj.options[obj.selectedIndex].text; /*获取文本，若将text改为value，则获取option的value*/
alert("your favorite color is "+color);
}
</script>
3.学习JQuery
http://developer.51cto.com/art/201005/202450.htm
http://wenku.baidu.com/view/fb8b0d68af1ffc4ffe47acb3.html
