本文介绍了使用easyui实现弹出窗口（datagrid，form等）的三种方法，包括使用display和visibility控制窗口显示。在实践中遇到显示样式丢失和无法设置默认隐藏等问题，经过一天多的研究和资料查阅，作者最终找到了通过在弹窗div中添加closed属性来解决默认显示的方法。
设置弹窗的大体思路是通过display：或者visibility：两种样式的属性隐藏窗口，在通过按钮或者其他方式触发show方法来显示窗口，hide方法关闭窗口，也可以toggle来控制弹窗，
window.onload = function () {
$(document).ready(function(){
$("#aa").click(function(){
$("#my_dialog").toggle();
});
});
- 第一种
<meta charset="UTF-8">
<title>弹出登录框的实现代码</title>
</head>
<body>
<style type="text/css">
body {
margin: 0px;padding:0
}
#div1 {
display: none;
position: absolute;
z-index: 1000;
height: 100%;
width: 100%;
background: #000000;
filter:Alpha(opacity=30);
}
#div2 {
display: none;
position: absolute;
height: 100%;
width: 100%;
padding-top: 10%;
z-index: 1001;
left: 0px;
top: 0px;
}
</style>
<script>
function openme(){
document.getElementById('div1').style.display='block';
document.getElementById('div2').style.display='block';
}
function closeme(){
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='none';
}
function logo_in(){alert()
//验证
//转向...
//myform.action=""
//myform.submit()
closeme();
}
</script>
<div id="div1"></div>
<div id="div2">
<table width="30%" border="0" cellpadding="3" cellspacing="1" style="background: #ff7300;
position:static;filter:progid:DXImageTransform.Microsoft.DropShadow(color=#666666,offX=4,offY=4,positives=true)" align="center">
<tr id="m_tr">
<td><font color="#FFFFFF">欢迎登陆：</font></td>
<td align="right">
<input type="button" value="ｘ" onClick="closeme()" style="cursor: hand;">
</td>
</tr>
<tr>
<form name="myform" method="post" >
<td colspan="2" width="100%" bgcolor="#FFFFFF" height="150">
username: <input type="text" name="username" size="10">
<br>pasword:<input type="password" name="pasword" size="12">
<br><input type="button" name="logoin" value="登陆" onClick="logo_in()">
<input type="button" name="exit" value="取消" onClick="closeme()">
</td>
</form>
</tr>
</table>
</div>
<div>
<input name="button" type="button" onClick="openme()" value="登陆" />
</div>
<br>
- 第二种
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI实例基本弹出窗口-hovertree</title>
<link rel="stylesheet" type="text/css" href="http://hovertree.com/ziyuan/jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://hovertree.com/ziyuan/jeasyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://hovertree.com/ziyuan/jeasyui/demo.css">
<script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://hovertree.com/ziyuan/jeasyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>HoverTree基本弹出窗口</h2>
<p>弹出窗口能够自由拖动</p>
<div style="margin:20px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#hover'+'treewindow').window('open')">Open</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#hovertreewindow').window('close')">Close</a>
</div>
<!--<div id="hovertreewindow" class="easyui-window" title="HoverTree基本弹出窗口" data-options="iconCls:'icon-save'" style="width:500px;height:200px;padding:10px;">-->
<div id="hovertreewindow" class="easyui-window" title="添加学生"style="width:400px;padding:10px 60px 20px 60px;">
<form action="@{Manager.addStudents()}" method="post" >
学生编号：<input type="text" name="studentId" class="easyui-textbox" data-options="required:true"><br>
学生姓名：<input type="text" name="studentName" class="easyui-textbox" data-options="required:true"><br>
班级编号：<input type="text" name="classId" class="easyui-textbox" data-options="required:true"><br>
<div style="text-align:center">
<input type="submit" value="保存" class="easyui-linkbutton"data-options="plain:true">
<input type="submit" value="返回" formaction="@{Manager.getAllStudents()}" formmethod="get" class="easyui-linkbutton" data-options="plain:true">
</div>
</form>
</div>
</div><a href="http://hovertree.com" target="_blank" style="color:black;">HoverTree</a>
<a href="http://hovertree.com/hvtart/bjae/l59bo21o.htm" target="_blank">原文</a>
<!--</div>-->
</body>
</html>
- 第三种
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击按钮弹出输入框</title>
<style>
p{ margin:0; padding:0;}
.login-put {
clear: both;
line-height: 36px;
margin-bottom: 20px;
overflow: hidden;
width: 500px;
}
.login-put label {
color: #8c8686;
float: left;
font-size: 14px;
height: 36px;
line-height: 36px;
text-align: right;
width: 120px;
}
#form1{ float:left; width:320px}
#form1 label {
float: left;
text-align: left;
width: 80px;
}
input {
cursor: pointer;
vertical-align: middle;
}
.login-put #div1 {
padding-left: 120px;
}
.login-put #div1 input {
border: 1px solid #dddddd;
color: #999999;
float: left;
height: 36px;
line-height: 36px;
margin-right: 10px;
padding: 0 5px;
width: 190px;
}
</style>
</head>
<body>
<div class="login-put"><label>点击：</label>
<form id="form1" name="form1" method="post" action="">
<p>
<label>
<script type="text/javascript">
function show()
{
var value = document.getElementById("div1").style.display;
if(value=="none")
{
document.getElementById("div1").style.display="block";
}
else
document.getElementById("div1").style.display="none";
}
</script>
<input type="button" value="我是按钮" onClick="show()"/>
<div id="div1" style="display:none">
<input class="text01" name="" type="text" />
</div>
</label>
</p>
</form>
</div>
其实研究了一天多，也没有解决好这个弹窗的问题，要不就是用display：none导致窗窗口样式丢失，要不就是无法更改默认为隐藏，查了很多资料，也没有搞清楚自己到底是哪里出了问题。
在整个过程中看到了很多的不同思路，学习了
希望能找到更好更完善的方式来解决
======================================
终于找到解决弹窗默认显示的办法了
在弹窗的div中加上closed="true"属性
扫一扫
1885
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
