Modal is getting affected by below div - html

Question

Dont Know what i am missing Please CHeck looking forward to your guideness
here is code
html
<button title="Register" class="bn1">Register</button>
<!--Starting of Modal Making-->
<div id="openModal" class="modalDialog">
<div>
X
<div id="modaltext">
<h2>Regisration Form</h2>
<p></p>
<p>Photopool provides you three packages .....You can Check Our packages Here as Well as You can Join us Free :)</p>
<p>Photopool welcomes You here :)</p>
</div>
</div>
``</div>
<!--Ending of Modal-->
html of below div (join us )
<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> <p class="line31" align=right" style="width:50px;height:20px;"> .com </p><br/>
<p class="line4" style="width:18px;height:30px;">U</p><p class="line41" style="width:69px;height:30px;">pload </p>
<p class="line5" style="width:20px;height:30px;">S</p><p class="line51" style="width:59px;height:30px;">hare </p>
<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;"> HERE</p><br/>
<p class="line9" style="width:200px;height:30px;">Our Exciting</p><br/>
<p class="line10" style="width:194px;height:43px;">Membership</p>
<p class="line11" style="width:80px;height:30px;">Plans</p>
</hgroup>
</div>
CSS of Modal and its div
/MODAL styling/
.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);
}
css of below div (join us )
#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;
}
i just want to make this registration form prominant ..SOS !!!

Answer 1

the problem was the z-index ..
Here I've modify a CSS little bit. just remove the z-index:99999 and give the z-index property to div child of div which id is "openModal"
Here is jsfiddle!
I hope this is you are looking for.