easyui 实现弹出窗口（datagrid，form...）的各种方法

最新推荐文章于 2020-07-06 18:12:51 发布

原创最新推荐文章于 2020-07-06 18:12:51 发布 · 5.7k 阅读

1 ·

CC 4.0 BY-SA版权

easyui 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了使用easyui实现弹出窗口（datagrid，form等）的三种方法，包括使用display和visibility控制窗口显示。在实践中遇到显示样式丢失和无法设置默认隐藏等问题，经过一天多的研究和资料查阅，作者最终找到了通过在弹窗div中添加closed属性来解决默认显示的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设置弹窗的大体思路是通过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>