CODEWITHSUNDEEP
javascriptjquerypopup
Ziker
Ziker

Reputation: 141

Javascript "close button" not working

Today I tried to make the simpliest close button in javaScript. It unfortunately does not work. This is how it look like:

<div id="popup_bg">
<div id="popup_window">
<span id="popup_close">
</span>
</div>
</div>

and the js code is:

<script type=”text/javascript”>
        $("#popup_close").click(function() {
        $("#popup_bg").fadeOut();
        event.stopPropagation();
        });
</script>

I'd also like to make it apply to any of those "popups", so I'd probably change my it to something like $(this).parent().parent().fadeOut(); - is it possible to do so?

Thanks for help guys! :)

@EDIT

As none of Your solutions work I'll place my code literally :D Maybe You'll find some mistakes that makes it faulty:

<?php if(isset(errors['user'])) : ?>    
<script type="text/javascript">
    $(function()
    {
        $("#popup_close").on('click', function() {
        $("#popup_background").fadeOut();
        //event.stopPropagation();
        });
    });
</script>
<div id="popup_background" >
    <div class="popup_window">
        <span class="title">
        error
        </span>
        <span class="message"><?php echo errors['user']; ?>
        </span>
        <span id="popup_close" class="button">OK</span>
    </div>
</div>
<?php endif; ?>

I hope that will help You spot any errors. It displays correctly, I click on my "OK" span, nothing happens :p I hate js :D

Upvotes: 0

Views: 1666

Answers (5)

Zahin Alwa
Zahin Alwa

Reputation: 376

I saw your code, the jquery part of the code is working.. Check here: Jsfiddle -> http://jsfiddle.net/Zahinize/7YD4D/13/

You should rewrite your conditional If statement like this, 

 <? ini_set('error_reporting', E_ALL); ?>

 <script type="text/javascript">
  $(function()
  {
    $("#popup_close").on('click', function() {
    $("#popup_background").fadeOut();
    //event.stopPropagation();
    });
   });
  </script>

 <div id="popup_background" >
  <div class="popup_window">
    <span class="title">
    error
    </span>
    <span class="message">

    <?php 
     if(isset(errors['user'])){      
      echo errors['user']; 
      }
    ?>
     </span>
    <span id="popup_close" class="button">OK</span>
  </div>
</div>

set error_reporting at that the top..

See more here: http://php.net/manual/en/function.error-reporting.php

Maybe this would help, but frankly i haven't seen error handling like this: error['user'] anywhere.. you should see error handling for writing better code ;)

Upvotes: 1

udidu
udidu

Reputation: 8588

Add document.ready and/or use .on function

<script type=”text/javascript”>
    $(function(){
        $("#popup_close").on('click', function() {
            $("#popup_bg").fadeOut();
            event.stopPropagation();
        });
    });
</script>

Also, ID's may not repeat in your document, use other selector like class

Upvotes: 1

Christophe Roussy
Christophe Roussy

Reputation: 16999

You need some content in your span or set height and with. Then you will be able to click on it and it will work. Avoid tricks with parent().parent() this may break if you change your div structure. As others have said use the jquery document ready (read a tutorial) and use classes not ids if you intend to reuse the code (read a CSS tutorial)...

Upvotes: 0

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

If there are more than one popup better to use class instead of id.

Example.

$(function()
{
    $(".popup_close").on('click',(function()
    {
        $(this).parents("div.popup_bg").fadeOut();
    });
});

And html

<div class = "popup_bg">
    <div class = "popup_window">
        <span class = "popup_close"></span>
    </div>
</div>

Upvotes: 0

Ram
Ram

Reputation: 144659

IDs must unique, you should use classes instead:

<div class="popup_bg">
   <div class="popup_window">
      <span class="popup_close"></span>
   </div>
</div>

Then for selecting the target parent of the clicked element you can use closest method:

$(function() { 
    $(".popup_close").click(function(event) {
       $(this).closest(".popup_bg").fadeOut();
       // event.stopPropagation();
    });
});

Note that in your code event is undefined you should pass the event object to your handler.

Upvotes: 1

Related Questions