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条)

报告相同问题？

悬赏问题

  • ¥35 平滑拟合曲线该如何生成
  • ¥100 c语言，请帮蒟蒻写一个题的范例作参考
  • ¥15 名为“Product”的列已属于此 DataTable
  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题：最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面，并且报了如下错误，尝试过换显卡驱动，但是好像不行
  • ¥15 自己瞎改改，结果现在又运行不了了
  • ¥15 链式存储应该如何解决
  • ¥15 没有证书，nginx怎么反向代理到只能接受https的公网网站