html+css+div 实现简单的模态对话框

1. CSS 定义

<style>
{#    隐藏#}
        .hide{
            display: none;
        }
{#        遮罩层#}
        .shade{
            position: fixed;
            top: 0 ;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
{#        对话框#}
        .mode{
            position: fixed;
            top: 230px;
            height: 400px;
            width: 500px;
            left: 50%;
            background-color: white;
            margin-left: -250px;
            z-index: 10;
        }
    </style>

2. html：

<div class="shade hide"></div>
    <div class="mode hide">
        <div style="margin: 100px 100px">
            <form action="/cmdb/assets/" method="post">
                {% csrf_token %}
                <div>
                    <input type="text" placeholder="服务器名称" name="h">
                </div>
                <div>
                    <input type="text" placeholder="IP地址" name="ip">
                </div>
                <div>
                    <input type="text" placeholder="端口号" name="port">
                </div>
                <div>
                    <select name="b_id">
                        {% for row in v1 %}
                            <option value="{{ row.id }}">{{ row.caption }}</option>
                        {% endfor %}
                    </select>
                </div>
                <span><input type="submit" value="提交"></span>
                <span><input id="submit" type="button" value="提"></span>
                <span><input id = quxiao type="button" value="取消"></span>
                <span id="error" style="color: red"></span>
            </form>
        </div>
    </div>

3.script:

因为我们同时给遮罩层和输入框加上了hide样式（自动隐藏），所以当点击添加的时候就让遮罩层和输入层弹出。点击输入框里面的取消时候（id=quxiao），继续隐藏

<script>
    $(function(){
        $('#add').click(function(){
           $('.shade,.mode').removeClass('hide')
        })
    });
    $(function(){
        $('#quxiao').click(function(){
           $('.shade,.mode').addClass('hide')
        })
    });
    </script>