JaveWeb 公司项目（2）----- 类模态窗口显示DIV并将DIV放置在屏幕正中间

时间：2020-12-11 19:33:28

上一篇博客写的是通过隐藏显示进行div的替换，接下来需要在原有的div前添加一个div，进行表单的提交，需要将div放置在正中间，然后类似C#中的模态窗口，在进行完新弹出的div操作之后，才可以进行下一步操作

首先第一步，新建一个div窗口，代码暂时不贴，主贴的最后贴上完整代码

效果如图所示：
JaveWeb 公司项目（2）----- 类模态窗口显示DIV并将DIV放置在屏幕正中间

可以看出此时的DIV只是将元素展示了出来，还没有进行相应的优化，且不能对元素进行操作，主体DIV的位置也没有固定，显得很难看，下面对界面进行优化排版

首先要将div的位置放在界面的正*，修改主体DIV的style，我在网上没有找到一个简单的方法，所说的设置margin:0px auto;并没有实现效果

于是这里我用了一个最原始的方法，根据屏幕大小估算位置，如果后面我发现了有更好更快捷的方法我会及时更新的

完成这一步之后，需要调整界面上各个控件之间的位置排列，调整间距和边框的距离等细节问题

网上查找的方法，基本上都是和屏幕居中放置一样，设置一个line-height和text-align，我试了一下，都是针对文字的，于是还是老办法，手动调整距离和控件为重的大小，原先的布局是用的easyui官网的例子，使用的是<table>，<tr>，<tb>标签，我无法调整每个控件之间的距离，于是我改为了<form>和<P>标签，在<head>中设置P的<Style>为<style> p{ margin:20px auto} </style>

在表单中设置<P>的align属性为Middle（在Style中设置的无效。暂时还没找到原因），效果如图：

JaveWeb 公司项目（2）----- 类模态窗口显示DIV并将DIV放置在屏幕正中间

 

完成这些之后，新增的DIV在界面上无法操作，在主DIV的<Style>中设置z-index: 2 属性即可

最后一个步骤，将DIV设置成类模态窗口

我最先的设想是新建两个Div，一个Div覆盖全屏幕，将背景设置为透明，再设置一个DIV放置表格，达到模态的效果，后来同事提醒我，Easyui有这个功能，网址如下：http://www.jeasyui.net/demo/586.html，在示例的Windows中有这个示范，选择模态窗口即可，在运行的过程中，我发现原先我使用的通过visibility属性没有用了，默认的easyui-windows将div的属性设置为了display：none，我在运行调试的时候窗口默认显示而非原先设置的按钮弹出，我去掉了一层Div之后有效果了，效果如图所示：

JaveWeb 公司项目（2）----- 类模态窗口显示DIV并将DIV放置在屏幕正中间

 我写了有个简单的示例，代码如下，仅供参考：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Modal Window - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>

    <div id="no2" style="position:absolute;top:-5px;;left:230px;height:96%;width:88%;margin:20px 0;z-index: 2" >
    <table id="tableUser" class="easyui-datagrid" title="用户管理表" style="width:96%;height:98%;overflow:hidden;"
           data-options="          
              fitColumns:true,
              striped:true,
              rownumbers:true,
              singleSelect:true,
              toolbar:'#tb2',
              pagination:true,
               pageSize:10">
        <thead>
        <tr>
            <th data-options="field:'szUserName',width:30,align:'center'">用户名</th>
            <th data-options="field:'szDepartment',width:40,align:'center'">部门</th>
            <th data-options="field:'szPosition',width:40,align:'center'">职位</th>
            <th data-options="field:'szJobNumber',width:50,align:'center'">工号</th>
            <th data-options="field:'szNote',width:50,align:'center'">备注</th>
            <th data-options="field:'NRole',width:50,align:'center'">权限</th>
        </tr>
        </thead>
    </table>
    <div id="tb2" style="height:auto">
        <a id="add" href="javascript:void(0)"class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="$('#w').window('open')">增加</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="$('#w').window('open')">修改</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="accept()">删除</a>
    </div>
</div>
    
    <div id="w" class="easyui-window" title="Modal Window" data-options="modal:true,closed:true" style="width:500px;height:490px;padding:10px 60px 20px 60px">
        <form id="User" class="easyui-form" method="post" data-options="novalidate:true">
            <p class="Name" align="middle">
                &nbsp<label>用户名：</label>&nbsp&nbsp
                <input class="easyui-textbox" type="text" name="name" data-options="required:true"></input>
            </p>

            <p class="Psw" align="middle">
                <label>输入密码：</label>
                <input class="easyui-textbox" type="text" name="name" data-options="required:true"></input>
            </p>

            <p class="Ypsw" align="middle">
                <label>确认密码：</label>
                <input class="easyui-textbox" type="text" name="name" data-options="required:true"></input>
            </p>

            <p class="Department" align="middle">
                &nbsp&nbsp&nbsp<label>部门： </label>&nbsp&nbsp&nbsp
                <input class="easyui-textbox" type="text" name="name" data-options="required:true"></input>
            </p>

            <p class="Work" align="middle">
                &nbsp&nbsp&nbsp<label>职位：</label>&nbsp&nbsp&nbsp
                <input class="easyui-textbox" type="text" name="name" data-options="required:true"></input>
            </p>

            <p class="Number" align="middle">
                &nbsp&nbsp&nbsp<label>工号：</label>&nbsp&nbsp&nbsp
                <input class="easyui-textbox" type="text" name="name" data-options="required:true"></input>
            </p>

            <p class="permissions" style="position: relative; margin-left:91px">
                &nbsp&nbsp&nbsp<label>权限：</label>&nbsp&nbsp&nbsp
                <select class="easyui-combobox" name="language"><option value="User">普通用户</option><option value="Admin">管理员</option><option value="Master">超级管理员</option></select>
            </p>

            <p class="PS" align="middle">
                &nbsp&nbsp&nbsp<label>备注：</label>&nbsp&nbsp&nbsp
                <input class="easyui-textbox" type="text" name="name" data-options="required:true"></input>
            </p>

        </form>
        <div style="text-align:center;padding:5px">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>&nbsp&nbsp&nbsp
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">清空</a>&nbsp&nbsp&nbsp
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">取消</a>
        </div>
    </div>

</body>
</html>

 

 PS 值得一提的是，使用了Easyui-Window样式之后，不能对原窗体设置定位，也就是说我们设置的居中定位不能使用了，好在原先设定的样式可以拖动且位置也是居中设计的，至于为什么在DIV中设置Position失效，暂时还没有找到原因

 


 
标签：

相关文章