qq_956350073 2017-07-31 06:32 采纳率: 92.3%
浏览 1409
已采纳

效果图如下（使用js创建自定义对话框，html,css,来完用户的添加），哪位大神帮我！不知道怎么写

图片说明

  • 写回答

3条回答 默认 最新

  • 张大教主 2017-07-31 09:40
    关注

    图片说明

    <html>
<meta charset="utf-8"/>
<script type="text/javascript" src="http://www.srcfans.com/js/jquery-1.9.1.min.js"></script>
<head>
    <style>
        body{
            font-family:微软雅黑;
            font-size:14px;
        }
        .dialog{
            width:550px;
            height:500px;
            background:#fff;
            border:1px solid #B2B2B2;
        }
        .header{
            top:0px;
            width:100%;
            height:35px;
            text-align:left;
            line-height:40px;
            border-bottom:1px solid #B2B2B2;
        }
        .header>span{
            padding-left:15px;
        }
        .header>a{
            color:red;
            cursor:pointer;
            padding-left:83%;
        }
        .tb{
            position:relative;
            width:100%;
            top:0px;
            left:0px;
            padding-left:20px;
            border-spacing:0px;
            cellspacing:0px;
        }
        .td{
            height:40px;
            width:50%;
            padding:5px;
            line-height:40px;
            width:50%;
        }
        .td input,select{
            display:block;
            height:30px;
            width:200px;
            border-radius:5px;
            border:1px solid #B2B2B2;
        }
        .td button{
            margin-left:25%;
            width:100px;
            height:35px;
            background:#20ADE5;
            border:0px;
        }
    </STYLE>
</head>
<body>
    <button onclick="add()">添加</button>
    <button onclick="closeWin()">关闭</button>
    <div class="dialog">
        <div class="header"><span>新增用户</span><a onclick="closeWin();">X</a></div>
        <table class="tb">
            <tr>
                <td class="td">账号：<input placeholder="请输入账号"/></td>
                <td class="td">名称：<input placeholder="请输入名称"/></td>
            </tr>
            <tr>
                <td class="td">密码：<input placeholder="请输入密码"/></td>
                <td class="td">确认密码：<input placeholder="请确认密码"/></td>
            </tr>
            <tr>
                <td class="td">邮箱：<input placeholder="请输入邮箱"/></td>
                <td class="td">手机号：<input placeholder="请输入手机号"/></td>
            </tr>
            <tr>
                <td class="td" colspan="2">类型:<select placeholder="请选择">
                    <option name="key1">管理员</option>
                    <option name="key1">用户</option>
                </select>

                </td>
            </tr>
            <tr>
                <td class="td"><button>取消</button></td>
                <td class="td"><button>提交</button></td>
            </tr>
        </table>
    </div>
    <script>
        closeWin();
        function add(){
            $(".dialog").show();

        }
        function closeWin(){
            $(".dialog").hide();
        }
    </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？