cancel
Showing results for 
Search instead for 
Did you mean: 

Magento 2 modal: Content is showing on page load

Magento 2 modal: Content is showing on page load

I'm not sure what I'm doing wrong because I'm just using the official code from https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/widgets/widget_modal.html/quickpayportal

The problem is, that content of the modal is shown for a few milliseconds on every page load/page change and then gets hidden. Modal itself works, though.

This can't be the expected behavior, so I'm wondering what I'm doing wrong.

Is there any CSS I have to use to prevent modal content to be shown on page load?

Thanks.

3 REPLIES 3

Re: Magento 2 modal: Content is showing on page load

I got around this by hiding the modal content div with css, then changing the visibility once the pop up occurs.

<style> .modal-body-content{visibility:hidden;} </style>

Then place:

$('.modal-body-content').css('visibility','visible');

after:

$('#modal').modal('openModal');

 

Re: Magento 2 modal: Content is showing on page load


@RobertBett73e3 wrote:

I'm not sure what I'm doing wrong because I'm just using the official code from https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/widgets/widget_modal.html/quickpayportal

The problem is, that content of the modal is shown for a few milliseconds on every page load/page change and then gets hidden. Modal itself works, though.

This can't be the expected behavior, so I'm wondering what I'm doing wrong.

Is there any CSS I have to use to prevent modal content to be shown on page load?

Thanks. mycvshr


Moreover, page loading time is also important regarding search engine rankings. Fast-loading websites usually will be ranked higher in the SERPs. Thus, Magento 2 Speed Optimization is a step that every store owner should take to increase traffic and conversion rates.

Re: Magento 2 modal: Content is showing on page load


@MatildaCooe923 wrote:

@RobertBett73e3 wrote: Panorama Charter Spectrum

I'm not sure what I'm doing wrong because I'm just using the official code from https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/widgets/widget_modal.html/quickpayportal

The problem is, that content of the modal is shown for a few milliseconds on every page load/page change and then gets hidden. Modal itself works, though.

This can't be the expected behavior, so I'm wondering what I'm doing wrong.

Is there any CSS I have to use to prevent modal content to be shown on page load?

Thanks. mycvshr


Moreover, page loading time is also important regarding search engine rankings. Fast-loading websites usually will be ranked higher in the SERPs. Thus, Magento 2 Speed Optimization is a step that every store owner should take to increase traffic and conversion rates.


Create module which is extended from Magento_Catalog module.Please refer this article for Module Creation.