CODEWITHSUNDEEP
javascriptpythonjquerydjangopopup
mattarello
mattarello

Reputation: 229

pop-up screan doesn't get visible if it's activated by button click

        {% if i.content %}
            <button onclick="show('{{i.id}}')" class=title-holder>
                <p class=nomnom3>{{i.user}}</p>
            </button>
            <div class="overlay" id={{i.id}}>
                <div id=fullscrean2>
                    <p class=content-holder>{{i.content}}</p>
                </div>
            </div>
            {% else %}  
            <button class=title-holder>
                <p class=nomnom3>{{i.user}}</p>
            </button>
        {% endif %}

The html above have two conditions, if there is a user comment it creates a hidden full screan pop-up which I want to activate by button click, else it just displays the user.

css for pop-up:

.overlay{
    position: fixed;
    top:0;
    height: 100vh;
    width: 100%;
    z-index: 1;
    background-color: rgba(0,0,0,0.4);
    display: none;
}

I have two functions to make it work:

$("body").click(function () {
    $(".overlay").each(function(){
        $(this).css("display", "none")
        $('body').css('overflow', 'scroll');
    })     
});

The one above hides the pop-up screan on any click.

function show(id){  
    $("#"+id).css("display","block");
}

This one gets triggered on button click, but doesn't display the pop-up, only blurs a portion of the screen. But pop-up screen and the first function works fine if pop-up's display is block on pageload.

Edit: Looks like $("#"+id).css("display","block"); is not changing selected element's display attr for some reason, but changing it manually from browser works.

All browsers react the same.

Edit2: The blurriness is caused overflow:scroll in the <body>.

Edit3: Looks like both functions work and the pop-up is set to display:noneright after it's set to block, solved it gonna edit.

Upvotes: 1

Views: 55

Answers (1)

matthias_h
matthias_h

Reputation: 11416

When you click on the button, the click() event handler attached to body is called, too, and so the display is set to none immediately after it was set to block. To avoid this behaviour, you can exclude clicks on the button from the click event handler of body like this:

$("body").click(function(e) {
  if (e.target.className !== "nomnom3" && e.target.className !== "title-holder") {
    $(".overlay").each(function() {
      $(this).css("display", "none")
      $('body').css('overflow', 'scroll');
    });
  }
});

function show(id) {
  $("#" + id).css("display", "block");
}
.overlay{
    position: fixed;
    top:0;
    height: 100vh;
    width: 100%;
    z-index: 1;
    background-color: rgba(0,0,0,0.4);
    display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <button onclick="show('1')" class=title-holder>
   <p class=nomnom3>User</p>
 </button>
 <div class="overlay" id="1">
   <div id=fullscrean2>
     <p class=content-holder>Content</p>
   </div>
 </div>

Upvotes: 1

Related Questions