Modal受到以下div的影响

Question

不知道我错过了什么请CHeck期待你的指导

这是代码

html
<a href="#openModal"><button title="Register" class="bn1">Register</button></a>
                    <!--Starting of Modal Making-->
                <div id="openModal" class="modalDialog">

                    <div>

                        <a href="#close" title="close" class="close">X</a>
                        <div id="modaltext">
                        <h2>Regisration Form</h2>

                        <p></p>
                        <p>Photopool provides you three packages .....You can Check Our packages <a href="packages.php">Here</a> as Well as You can Join us Free :)</p>
                        <p>Photopool welcomes You here :)</p>
                         </div>
                        </div>
              ``</div>

                                <!--Ending of Modal-->

下面div的html（加入我们）

                     <div id="content">
                            <div id="textcontent" align="center">
                            <hgroup id="text">
                             <p class="line1" style="width:160px;height:28px;">Join Us!! </p><br/>
                             <p class="line2" style="width:24px;height:19px;"> on</p><br/>
                             <p class="line3" style="width:150px;height:30px;">Photopool</p>&nbsp;&nbsp;<p class="line31" align=right" style="width:50px;height:20px;">&nbsp;.com </p><br/>
                              <p class="line4" style="width:18px;height:30px;">U</p><p class="line41" style="width:69px;height:30px;">pload </p>&nbsp;
                              <p class="line5" style="width:20px;height:30px;">S</p><p class="line51" style="width:59px;height:30px;">hare </p>&nbsp;
                              <p class="line6" style="width:20px;height:30px;">D</p><p class="line61" style="width:116px;height:30px;">ownload</p><br/>
                              <p class="line7" style="width:170px;height:30px;">Photoshoots </p><br/>
                                <hr/>
                              <p class="line8" style="width:130px;height:20px;">Check</p><p class="line81" style="width:130px;height:33px;"><a href="*"> HERE</a></p><br/>
                              <p class="line9" style="width:200px;height:30px;">Our Exciting</p><br/>
                              <p class="line10" style="width:194px;height:43px;">Membership</p>
                              &nbsp;<p class="line11"  style="width:80px;height:30px;">Plans</p>

                            </hgroup>
                            </div>

Modal的CSS及其div

/ MODAL样式 /

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,1.9);
    z-index: 99999;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modalDialog > div {
    width: 400px;
    position:relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #000000;
    background: -moz-linear-gradient(#FFFFFF, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}

下面的div（加入我们）

#textcontent{
    margin-top:1.5%;
    float:right;
    width: 39%;
    height:62%;
    margin-right:4%;
    transform:rotate(-1deg);
    -ms-transform:rotate(-1deg); /* IE 9 */
    -webkit-transform:rotate(-1deg); /* Safari and Chrome */
}
#text{
    padding-left:24px;
    padding-right:27px;
    margin-right:5%;
    background-color:/*#EED2EE*/#000000;
    margin-top: 1.4%;
    background:rgba(0, 0, 0, 0.5);
    width:75%;
    height:95%;
    border-radius:10px; 
    box-shadow: 0 0 1em 0em #ccc;
}

我只是想让这个注册表格成为主要内容..SOS !!!

Answer 1

问题是z-index ..

这里我修改了一点CSS。只需删除z-index:99999并将z-index属性赋予div的div，其id为“openModal”

这是jsfiddle！

我希望你正在寻找。