Support

Modal Issue

Posted: March 13, 2019 at 8:04 pm


Michael

March 13, 2019 at 8:04 pm

Hi, I have an issue with the modal for the MER add-on. When I click the ‘Add To Cart’ button, the modal shows up, but I get a overlay that prevents me from clicking anything.

See Screenshot:
https://www.evernote.com/l/APfAMzk2UM5CtprD_9F7GGXYB40x4Niz9Rc

In my inspector, I can see that there is a overlay div with the ID “ee-overlay”. I am assuming ee stands for event-espresso. If I set this to display:none in my inspector, it goes away and everything works.

See screenshot:
https://www.evernote.com/l/APcsLlnI-vRDe7Hqj4ClJRrggem_SiaUFrM

Please advise.

Thanks!


Michael

March 18, 2019 at 10:20 am

Hi… following up. Thanks!


Tony

  • Support Staff

March 19, 2019 at 11:41 am

Hi there,

The reason this is happening is due to the shiftnav plugin wrapping the page content in a div (with a class of shiftnav-wrap) and then setting the z-index of that div to 250 – https://monosnap.com/file/ZxigheHn5CI1iKTzL35jVNO8lZro1c

Child elements can’t have a z-index higher than their parent, so when EE sets the z-index of the cart modal to 10001… its ignored – https://monosnap.com/file/WxMa7ooLDKtfZHV1A0e9htu8crqkw7
(Note I removed the comments around the zindex of 250 to show the above)

The overlay, however, is outside of the shiftnav-wrap div, so it gets its 10000 z-index value applies and displays on top of everything.

You’ll need to prevent that plugin from applying a z-index to everything on the page as nothing can override it.

Just to note, ‘bumping‘ your threads basically puts them back to the back of the queue as we work through threads based on reply date. It’s not always as clear cut as that as sometimes we need to wait on additional feedback, but point being, bumping will usually have the opposite effect than intended ๐Ÿ™‚


Michael

March 20, 2019 at 12:41 pm

Thank you for your reply and thanks for the bumping tip.

I have temporarily disabled it with some css until I can reach out to the shiftnav developer:


#ee-overlay{
  opacity: 0 !important;
  z-index: 0 !important;
}

I hope this doesn’t break anything ๐Ÿ™‚

The support post ‘Modal Issue’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Status: closed

Updated by  Michael 1 year, 7 months ago ago

Topic Tags

Notifications

This topic is:
pending
Do NOT follow this link or you will be banned from the site!
[gravityform id=80 title=false description=false ajax=false]
<div class='gf_browser_unknown gform_wrapper' id='gform_wrapper_80' ><form method='post' enctype='multipart/form-data' id='gform_80' action='/topic/modal-issue/'> <div class='gform_body'><ul id='gform_fields_80' class='gform_fields top_label form_sublabel_below description_below'><li id='field_80_1' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_80_1' >First name<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_text'><input name='input_1' id='input_80_1' type='text' value='' class='medium' aria-required="true" aria-invalid="false" /></div></li><li id='field_80_2' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_80_2' >Email address<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_email'> <input name='input_2' id='input_80_2' type='email' value='' class='medium' aria-required="true" aria-invalid="false" /> </div></li><li id='field_80_3' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' >GDPR Agreement<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_checkbox'><ul class='gfield_checkbox' id='input_80_3'><li class='gchoice_80_3_1'> <input name='input_3.1' type='checkbox' value='I consent to have this website store my submitted information so they can respond to my inquiry.' id='choice_80_3_1' /> <label for='choice_80_3_1' id='label_80_3_1'>I consent to have this website store my submitted information so they can respond to my inquiry.</label> </li></ul></div></li><li id='field_80_4' class='gfield gform_validation_container field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_80_4' >Phone</label><div class='ginput_container'><input name='input_4' id='input_80_4' type='text' value='' autocomplete='off'/></div><div class='gfield_description' id='gfield_description_80_4'>This field is for validation purposes and should be left unchanged.</div></li> </ul></div> <div class='gform_footer top_label'> <input type='submit' id='gform_submit_button_80' class='gform_button button' value='Download Now' onclick='if(window["gf_submitting_80"]){return false;} if( !jQuery("#gform_80")[0].checkValidity || jQuery("#gform_80")[0].checkValidity()){window["gf_submitting_80"]=true;} ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_80"]){return false;} if( !jQuery("#gform_80")[0].checkValidity || jQuery("#gform_80")[0].checkValidity()){window["gf_submitting_80"]=true;} jQuery("#gform_80").trigger("submit",[true]); }' /> <input type='hidden' class='gform_hidden' name='is_submit_80' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='80' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_80' value='WyJbXSIsIjBiNjdjZjkyMDUzOWUxOWY5Y2NiZjIwMzM4YjA1Mjk4Il0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_80' id='gform_target_page_number_80' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_80' id='gform_source_page_number_80' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form> </div><script type='text/javascript'> jQuery(document).bind('gform_post_render', function(event, formId, currentPage){if(formId == 80) {} } );jQuery(document).bind('gform_post_conditional_logic', function(event, formId, fields, isInit){} );</script><script type='text/javascript'> jQuery(document).ready(function(){jQuery(document).trigger('gform_post_render', [80, 1]) } ); </script>
[i]
[i]