html - 为什么弹出窗口的某些部分被切断

Question

我有以下 HTML/CSS:

<div id="modal">
    <div class="modal-content">
        <div class="header">
            <h2>Add Item to Your Shopping Cart</h2>
        </div>
        <div class="copy">
            <label>Item:</label>
            <select id="itemChoice">
                <option value="Wine" selected>Wine</option>
                <option value="Shot">Shot</option>
                <option value="Beer">Beer</option>
            </select>
            <br /><span id="spanPrice" />
            TESTING

        <label>Quantity:</label>
        <input type="text" id="rname" name="email" placeholder="Jane Doe">

        <label>Price:</label>
        <input type="text" id="email" name="contact" placeholder="name@email.com">

        </div>
        <div class="cf footer">
            <a href="#" class="btn">Close</a>
        </div>
    </div>
    <div class="overlay"></div>
</div>

<a href="#modal" class="btn go">Activate Modal</a>

/* Normal styles for the modal */
#modal {
    left:50%;
    margin:-250px 0 0 -40%;
    opacity: 0;
    position:absolute;
    top:-50%;
    visibility: hidden;
    width:80%;
    box-shadow:0 3px 7px rgba(0,0,0,.25);
    box-sizing:border-box;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}
    /* Make the modal appear when targeted */
    #modal:target {
        opacity: 1;
        top:50%;
        visibility: visible;
    }
#modal .header,#modal .footer {
    border-bottom: 1px solid #e7e7e7;
    border-radius: 5px 5px 0 0;
}
    #modal .footer {
        border:none;
        border-top: 1px solid #e7e7e7;
        border-radius: 0 0 5px 5px;
    }
#modal h2 {
    margin:0;
}
#modal .btn {
    float:right;
}
#modal .copy,#modal .header, #modal .footer {
    padding:15px;
}
.modal-content {
    background: #f7f7f7;
    position: relative;
    z-index: 20;
    border-radius:5px;
}
#modal .copy {
    background: #fff;
}

#modal .overlay {
    background-color: #000;
    background: rgba(0,0,0,.5);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

为什么弹窗会截掉剩下的标签:

弹出样式:

@import url(http://fonts.googleapis.com/css?family=Droid+Sans);
        @import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
        * {

        /*with these codes padding and border does not increase it's width.Gives intuitive style.*/

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        }

        body {
        margin:0;
        padding:0;
        font-family: 'Droid Sans', sans-serif;

        }
        div#envelope{
        width:100%;
        margin: 10px 0 10px 0;
        background-color:#f2f4fb;
        padding:10px 0;
        border:1px solid gray;
        border-radius:5px;
        }

        form{
        width:70%;
        margin:0 15%;
        }

        form header {
        text-align:center;
        font-family: 'Roboto Slab', serif;
        }

        /* Makes responsive fields.Sets size and field alignment.*/
        input[type=text], #itemChoice{
        margin-bottom: 20px;
        margin-top: 10px;
        width:100%;
        padding: 15px;
        border-radius:5px;
        border:1px solid #7ac9b7;
        }

        #additem
        {
        margin-bottom: 20px;
        width:100%;
        padding: 15px;
        border-radius:5px;
        border:1px solid #7ac9b7;
        background-color:rgb(164, 230, 219);
        }
        #addToTable
        {
        margin-bottom: 20px;
        width:50%;
        padding: 15px;
        border-radius:5px;
        border:1px solid #7ac9b7;
            background-color:rgb(164, 230, 219);
        }
        #cancelAdd {
            margin-bottom: 20px;
            width:50%;
            padding: 15px;
            border-radius:5px;
            border:1px solid #B0B8B6;
        background-color:#BBCBC8;
        }
        textarea{
        width:100%;
        padding: 15px;
        margin-top: 10px;
        border:1px solid #7ac9b7;
        border-radius:5px;
        margin-bottom: 20px;
        resize:none;
        }

        input[type=text]:focus,
        textarea:focus {
        border-color: #4697e4;
        }

        /* By using @ media form can have different layout for screen, mobile phone, tablet.*/

        /* Sets the form layout for mobile phone, tablet*/
        @media screen and (max-device-width: 600px){

        @import url(http://fonts.googleapis.com/css?family=Droid+Sans);
        @import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
        * {

        /*with these codes padding and border does not increase it's width.Gives intuitive style.*/

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        }

        body {
        margin:0;
        padding:0;
        font-family: 'Droid Sans', sans-serif;

        }
        div#envelope{
        width:50%;
        margin: 10px 30% 10px 25%;
        background-color:#f2f4fb;
        padding:10px 0;
        border:1px solid gray;
        border-radius:10px;
        }

        form{
        width:70%;
        margin:0 15%;
        }

        form header {
        text-align:center;
        font-family: 'Roboto Slab', serif;
        }

        /* Makes responsive fields.Sets size and field alignment.*/
        input[type=text], #itemChoice{
        margin-bottom: 20px;
        margin-top: 10px;
        width:100%;
        padding: 15px;
        border-radius:5px;
        border:1px solid #7ac9b7;
        }

        #additem
        {
        margin-bottom: 20px;
        width:100%;
        padding: 15px;
        border-radius:5px;
        border:1px solid #7ac9b7;
        background-color:rgb(164, 230, 219);
        }
        #addToTable
        {
        margin-bottom: 20px;
        width:50%;
        padding: 15px;
        border-radius:5px;
        border:1px solid #7ac9b7;
            background-color:rgb(164, 230, 219);
        }
        #cancelAdd {
            margin-bottom: 20px;
            width:50%;
            padding: 15px;
            border-radius:5px;

            border:1px solid #B0B8B6;
        background-color:#BBCBC8;
        }
        textarea{
        width:100%;
        padding: 15px;
        margin-top: 10px;
        border:1px solid #7ac9b7;
        border-radius:5px;
        margin-bottom: 20px;
        resize:none;
        }

        input[type=text]:focus,
        textarea:focus {
        border-color: #4697e4;
        }
        }

Answer 1

给出的代码完美执行。看起来您页面中的其他内容存在问题。

特别是，查看模态框的父级。这可能会影响模态框的显示。