CSS3 모달 상자가 내용을 뒤덮습니까?

그래서 왜 그것을 그것을 은폐 할 수 있을지 모르지만 그때 내가 로그 아웃하면 당신이 그것을 볼 수 있지만 백그라운드에서 볼 수 있습니다. 모달 창에서 로그 아웃 할 때만 표시됩니다. 난 당신이 바닥 글 표시에 대해 얘기를 바랍니다CSS3 모달 상자가 내용을 뒤덮습니까?

<!DOCTYPE html> 
<html> 

<head> 
    <title>SVHS Library Sign In/Out</title> 
    <meta name="SVHS-sign_in/out v1.0" content="form"> 
    <link rel="stylesheet" href="_css/main.css"> 
    <link rel="stylesheet" href="_css/modal.css"> 
    <style> 
     body { 
      width: 700px; 
      margin-left: auto; 
      margin-right: auto; 
      } 
    </style> 
</head> 

<body> 
    <header> 
     <h1>Sign In/Out</h1> 
    </header> 

    <!-- SIGN IN MODAL ------------------------------------------------------------------------ 
    -------------------------------------------------------------------------------------------> 
    <a href="#openModal1">Sign In</a> 

    <div id="openModal1" class="modalDialog"> 
     <div> 
      <a href="#close" title="Close" class="close">X</a> 
      <h2>Sign In</h2> 
      <p> 
       Please fill out and click sign in. 
      </p> 
      <form action=".php" method="post" class=""> 
       First Name: 
       <input type="text" name="fname"><br> 
       Last Name: 
       <input type="text" name="lname"><br> 
       <input type="radio" name="reason" value="check in/out book">Check In/Out Book<br> 
       <input type="radio" name="reason" value="use computer">Use Computer<br> 
       <input type="radio" name="reason" value="other">Other<br> 
       <input type="submit" value="Sign In"> 
      </form> 
     </div> 
    </div> 
    <!-- SIGN OUT MODAL ------------------------------------------------------------------------- 
    -------------------------------------------------------------------------------------------> 
    <a href="#openModal2">Sign Out</a> 

    <div id="openModal2" class="modalDialog"> 
     <div> 
      <a href="#close" title="Close" class="close">X</a> 
      <p> 
       Please fill out and click sign out. 
      </p> 
      <form action=".php" method="post" class=""> 
       First Name: 
       <input type="text" name="fname"><br> 
       Last Name: 
       <input type="text" name="lname"><br> 
       <input type="submit" value="Sign Out"> 
      </form> 
     </div> 

    <!-- FOOTER -------------------------------------------------------------------------------- 
    -------------------------------------------------------------------------------------------> 
    <footer> 
     <nav class="nav_footer"> 
     </nav> 
     <div class="legal"> 
      <p> 
       This is the footer. 
      </p> 
     </div> 
    </footer> 

    <!-- Scripts --> 
    <script type="text/javascript" src="_scripts/java.js"></script> 
</body> 
</html> 

===============CSS====================== 
.modalDialog { 
    position: fixed; 
    font-family: Helvetica, Arial, sans-serif; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: rgba(0,0,0,0.8); 
    z-index: 99999; 
    opacity:0; 
    -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: #fff; 
    background: -moz-linear-gradient(#fff, #999); 
    background: -webkit-linear-gradient(#fff, #999); 
    background: -o-linear-gradient(#fff, #999); 
    } 
.close { 
    background: #606061; 
    color: #FFFFFF; 
    line-height: 25px; 
    position: absolute; 
    right: -12px; 
    text-align: center; 
    top: -10px; 
    width: 24px; 
    text-decoration: none; 
    font-weight: bold; 
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    border-radius: 12px; 
    -moz-box-shadow: 1px 1px 3px #000; 
    -webkit-box-shadow: 1px 1px 3px #000; 
    box-shadow: 1px 1px 3px #000; 
    } 
.close:hover { background: #00d9ff; }

출처

2013-08-20 user2701687

무엇을 다루고 있습니까? 질문을 수정하고 잠시 문제를 설명하십시오. –

그것의 당신의 signout 모달의 사업부는 .. 여기 Signout 모달가 나타날 때 .. 그래서 바닥 글이 나타납니다 완전히

을 닫혀 있지 않기 때문에 여기 DEMO

와 유 변경해야 할 것입니다 :

위의 그림과 같이 마지막에 div를 하나 더 추가하십시오.

출처

2013-08-21 08:15:00

CSS3 모달 상자가 내용을 뒤덮습니까?

답변

관련 문제