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是完全不透明的。但是在这里我无法覆盖父亲的opacity属性，因此内部div也是透明的。有谁能建议解决方案？ jsfiddle - http://jsfiddle.net/manu2784/z5qrwfgv/

Answer 1

取消display:none fiddle

Answer 2

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

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

小提琴：http://jsfiddle.net/oxfuc4et/1/

（我从css中取出display:none仅用于演示目的，我相信你会在按钮上点击自己，对吗？）

Answer 3

我认为问题是

display:none

您是否在尝试like this

css莫代尔盒不工作

3 个答案: