html - css 模态框不工作

Question

我正在尝试创建一个模态框，这是我的 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>

这是我的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;
  } 

我在另一个 div 中有一个 div，我希望外部 div 是透明的，但内部 div 是完全不透明的。但在这里我无法覆盖 parent 的不透明度属性，因为内部 div 也是透明的。谁能提出解决方案？ jsfiddle - http://jsfiddle.net/manu2784/z5qrwfgv/

Answer 1

尝试将表格从背景中取出。如:

<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/

(我从 css 中取出 display:none 只是为了演示目的，我相信你会自己点击按钮，对吧？)