CSS3 Modal Box covers up content after it?

StackOverflow https://stackoverflow.com/questions/18346567

  •  25-06-2022
  •  | 
  •  

Question

So I have no idea why it would cover it up but then when i go to sign out you see it displayed but in the background. It will only show when i pull up the sign out modal window.

<!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; }
Was it helpful?

Solution

I hope your are talking about footer display..

Its just because your signout modal's div is not closed completely.. So Footer will appear when Signout modal appears..

Here is the DEMO

and here is what u need to change:

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

Jus add one more div at the end as I have shown above...

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top