cPanel Question posted in
The official documentation can be seen here.

block any click if modal is visible – CPanel

<body>
<div id='container'>
<div id='cpanel' style="position:fixed;">525</div>
</div>
<div class='modal' style="position:fixed;>323</div>
</body>

I want to prevent any click on container and its children if modal is visible.

js

$('#container, #cpanel').click(function(){
    if ($('.modal').is(':visible')) {return false;}
});

Click on container is blocked, but on cpanel is not !

Any help?

Tags:

2

Answers


  1. 0

    Try stopPropagation method:

    $('#container, #cpanel').on("click", function(event){
    if ($('.modal').is(':visible')) {
       event.stopPropagation()
    }
});

    https://codepen.io/anon/pen/zjywXV

    Login or Signup to reply.
  2. 0

    A possible solution can consider the CSS pointer-event property.

    If you are using the jquery ui dialog you can add the code to the events: 

    $('.modal').dialog({
    open: function( event, ui ) {
        $('#cpanel').css('pointer-events','none');
    },
    close: function( event, ui ) {
        $('#cpanel').css('pointer-events','auto');
    },
});

$('#container, #cpanel').click(function(e){
    e.stopPropagation();
    console.log('--->clicked');
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<div id='container'>
    <div id='cpanel' style="position:fixed;">525</div>
</div>
<div class='modal' style="position:fixed;">323</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search