6 replies · opened Jul 25, 2016
On this page: http://themes.semicolonweb.com/html/canvas/lightbox.php
For the inline modal only, I can't close the modal when clicking outside it (in the dark overlay) on its left or right side. If I click below or above it closes.
Hello,
This is because the Modal Content is set to 100% Width by default by the Plugin. It is recommended to use this by default since the Modal Content and Width can vary and Custom Width Styling for so many different modals is not supported at the moment.
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
ok, so why doesn't it occur also for other modals like html5 video or map embed?
Hello,
Actually, iFrame Modals have been set at max-width of 900px which is why they can be clicked on the Left/Right to get closed. However, Inline Modals have been set at 100%.
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
Hi cadilhac,
I had the same problem. Solevd it by using the following function. Hope it helps:
$.magnificPopup.open({
items: { src: elementTarget },
type: 'inline',
mainClass: 'mfp-no-margins mfp-fade',
closeBtnInside: false,
closeOnBgClick: true,
fixedContentPos: true,
removalDelay: 500,
callbacks: {
open: function(){
$('.mfp-content').css('left',$(document).width()/2-$('.mfp-content').width()/2);
if( elementAnimateIn != '' ) {
$(elementTarget).addClass( elementAnimateIn + ' animated' );
}
},
//default theme callbacks removed.. if you need it, copy them here
}
}, 0);
Remove the width from the mfpcontainer in magnific-popup.css
remove:
.mfp-container {
text-align: center;
position: absolute;
/* width: 100%; */
height: 100%;
top: 0;
padding: 0 8px;
box-sizing: border-box; }
Hello @katoba86,
Thank you so much for this Amazing Helpful Tip! We are sure that this will eventually help a Lot of Users.
Do let us know if we can help you with anything or if you find any issues with Canvas. Thanks. :)
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard