CODEWITHSUNDEEP
javascriptjquerylightbox
speccaN
speccaN

Reputation: 33

Can't hide a lightbox using .hide()

This is my first time asking a question so hopefully I do it right.

I am trying to create a lightbox using jQuery/javascript. The lightbox shows but when I want to hide it then it doesn't work.

Hopefully someone here can help me with this

$('.lightbox_trigger').click(function(e){

    e.preventDefault();



    if ($('#lightbox').length > 0) {

        $('#lightbox').show();
    }
    else{
        var lightbox =
        '<div id="lightbox">' + 
            '<p>Click to close</p>' + 
            '<div id="content">' +  
                '<p id="lightboxTxt">TEXT HERE!</p>' + 
            '</div>' +
        '</div>';

        $('body').append(lightbox);
        $('#lightbox').show();
    }

});
    $('#lightbox').on('click', function(){
        $('#lightbox').hide();
});

EDIT Here's the html

<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js.js"></script>
</head>

<body>
    <div id="logoDiv"><img src="images/logo.png"/>  </div>
<div id="topDiv">
  <div id="info">
      <h1>Information om oss</h1>
      <p>Information om sidan skrivs här</p>
    </div><!--end info-->
    <div id="form">
      <form id="loginForm" name"loginForm" action="" method="POST" class="loginForm">
          <h2>Inlogg</h2>
          <label>
              <span>Användarnamn: </span>
              <input id="userName" type="text" name="userName" placeholder="Ditt användarnamn" /><br>
          </label>

          <label id="passwordLabel">              
              <span id="passSpan">Lösenord: </span>
              <input id="password" type="password" name="password" placeholder="Ditt lösenord" /><br>
          </label>

          <label id="btnLabel">
              <!--<input type="button" class="button" value="Registrera" id="registerBtn" name="registerBtn"/>-->
              <a class="lightbox_trigger" href="http://www.google.se">Registrera</a>
          </label>
          <label>
              <!--<input type="button" class="button" value="Logga In" id="loginBtn" name="loginBtn"/>-->
              <a href="http://www.google.se" id="loginBtn">Logga In</a>

          </label>
      </form>
    </div><!--end form-->
</div><!--end topDiv-->

<!--<div id="regLight" class="regLighter"></div>
<div id="regDark" class="regDarker"></div>-->




<div id="footerDiv">
  <?php include ('footer.php'); ?>
</div><!--end footerDiv-->

</body>
</html>

Upvotes: 3

Views: 1390

Answers (2)

Anant Dabhi
Anant Dabhi

Reputation: 11114

If you create dynamically html you need to bind on click event after creating element

$('.lightbox_trigger').click(function(e){

    e.preventDefault();



    if ($('#lightbox').length > 0) {

        $('#lightbox').show();
    }
    else{
        var lightbox =
        '<div id="lightbox">' + 
            '<p>Click to close</p>' + 
            '<div id="content">' +  
                '<p id="lightboxTxt">TEXT HERE!</p>' + 
            '</div>' +
        '</div>';

        $('body').append(lightbox);
        $('#lightbox').show();
      // you need to  Bind on click event after creating element 
       $('#lightbox').on('click', function(){
        $('#lightbox').hide();
});
    }

});

Upvotes: 0

Wez
Wez

Reputation: 10712

It could be because your lightbox div is being loaded dynamically after the DOM load - Try this.

$('body').on('click', '#lightbox', function() {

  $('#lightbox').hide();

});

Upvotes: 3

Related Questions