css modal box not working - html

Question

i am trying to create a modal box, here is my html
<div id="sign_up_box"> // this should be transparent
<div id="signup_form"> // this should be opaque
<button type="button">X Close</button>
<form method="POST" action="signup_pro.php">
<label>Name</label></br>
<input type="text" name="username"/></br>
<label>Email</label></br>
<input type="email" name="email"/></br>
<label>Password</label></br>
<input type="password" name="password"/></br>
<input type="submit" value="Create Account"/>
</form>
</div>
</div>
here is my css
#sign_up_box {
position:absolute;;
top:0%;
left:0%;
bottom:0%;
right:0%;
width:100%;
height:100%;
background-color: crimson;
opacity:0.5;
display:none;
transition: opacity 400ms ease-in;
}
#signup_form {
position:absolute;
top:30%;
left:40%;
z-index:9999;
opacity:1 !important;
background-color:white;
width:30%;
min-width:100px;
padding:2px;
}
#signup_form form{
margin:5% auto;
width:80%;
opacity:1;
}
I have div inside another div, i want outer div to be transparent but inner div to be totally opaque.
but here i am unable to override the the parents opacity property as a result the inner div is transparent as well. can anyone suggest a solution? jsfiddle - http://jsfiddle.net/manu2784/z5qrwfgv/

Answer 1

try taking the form out of the backdrop. As in:
<div id="sign_up_box">// this should be transparent</div>
<div id="signup_form">// this should be opaque
<button type="button">X Close</button>
<form method="POST" action="signup_pro.php">
<label>Name</label>
</br>
<input type="text" name="username" />
</br>
<label>Email</label>
</br>
<input type="email" name="email" />
</br>
<label>Password</label>
</br>
<input type="password" name="password" />
</br>
<input type="submit" value="Create Account" />
</form>
</div>
Fiddle: http://jsfiddle.net/oxfuc4et/1/
(I took out display:none from the css only for demo purposes, I believe you will be doing that on button click yourself, right?)

Answer 2

Take this out display:nonefiddle

Answer 3

I think the problem is
display:none
Are you trying something like this