Question

How to prevent body from scrolling when opening a popup menu?(on mobile device)

  • 28 July 2021
  • 2 replies
  • 51 views

Hello Elementor Community,

 

How to prevent body from scrolling when opening a popup menu?(on mobile device)

 

I already put disable scrolling on but it’s is not working. 

 

This is the website I’m working on https://staging.negentien80.nl/product/houston/

 

any suggestions or tips?


2 replies

Userlevel 7
Badge +4

You have a JS error, maybe this is causing the issue.  Try this code:


jQuery(document).ready(function( $ ) {

(function() {
$("#uc_id").click(function() {
return $(".uc_hamburger") .toggleClass("cross"),
$("body") .toggleClass("overflow-hidden");
});
}).call(this);

});

 

 

Hi @Abner Rojas,

 

Thank you very much for you comment.

 

I tried you Code. I don’t see any error anymore but it looks like it doesn’t work.

 

These are the codes of the Unlimited Elements - Edit Widget - Animated Hamburger Icon:

 

HTML

<div class="uc_animated_hamburger_icon_holder" id="{{uc_id}}" style="text-align: {{alignment}};">
  
  <a id="{{hamburger_close_trigger}}" class='uc-icon-close-trigger' href="javascript:void(0)" style='display:none'>Close Trigger</a>
  
  <a href="{{link}}" {{link_html_attributes|raw}} class="uc_animated_hamburger_icon">

     <div class="uc_hamburger" id="{{effects}}">
      <span class="uc_line"></span>
      <span class="uc_line"></span>
      <span class="uc_line"></span>
    </div>

  </a>
</div>

 

CSS

#{{uc_id}}.uc_animated_hamburger_icon_holder{ position: relative; z-index: {{z_index}}px;}
#{{uc_id}} .uc_hamburger{ display: inline-block;  }
#{{uc_id}} .uc_animated_hamburger_icon {
      text-align: {{alignment}};
}

 

Javascript

jQuery(document).ready(function(){
   
  var objIcon = jQuery("#{{uc_id}}");
  
  var objLink = jQuery("#{{uc_id}} .uc_animated_hamburger_icon");
  
  var link = objLink.prop("href");
  link = decodeURIComponent(link);
   
  var isPopupAction = (link.indexOf("elementor-action:action=popup") != -1);
  
  var objLinkCloseTrigger = objIcon.find(".uc-icon-close-trigger");
  var objHamburger = jQuery("#{{uc_id}} .uc_hamburger");
  
  objLinkCloseTrigger.on("click", function(){
     objHamburger.removeClass("is-active");
  });
  
  objLink.click(function(){
        objHamburger.toggleClass("is-active");
  });
  
  if(isPopupAction == true){
     
    jQuery( document ).on( 'elementor/popup/hide', (event, id) => {
        objHamburger.removeClass("is-active");
    });
    
  }
  
});

 

I am using an iPhone 12 Pro Max IOS 14.4

Could you take a look at this?

Thanks in advance.

Bless

Reply