stop colorbox popup closing when clicking anywhere outside the popup - colorbox

We have a colorbox modal popup which we don't want to close unless the user clicks the "X" at the top right of the popup. Currently, it is closing if you click anywhere outside the popup area.
Many thanks!
Paul

Colorbox has options to modify that functionality. Just add this to your colorbox instantiation:
$("#selector").colorbox({
//your other colorbox options
//...
escKey: false,
overlayClose: false
});

Related

How do i remove the href on popup's close button in Leaflet?

In a Vue app, the close button on the markers popup change the URL by adding #close, making the page change.
Can I remove it?
Marker popup example
I recommended you to read leaflet doc for marker
you will see that you can hide button close by set option closeButton: false

Stay at the same position on page after closing Magnific Popup

When I close the Magnific Popup, the page should be at the same position as when I opened the Magnific Popup. Right now, after closing Magnific Popup I have to scroll to the gallery that was opened.
Here is the website:
https://www.perfora.sk/produkty/dizajnove-plechy/
The problem is:
always on Firefox (54.0.1 (32-bit))
after refresh on Chrome (60.0.3112.101); if I open it second time, it
works fine
Galleries with names: Rythmic Illusion Cubrik, Rythmic Orchestra, Rythmic Gota, Rythmic Exau and Rythmic Corail.
I have to say, that I have to scroll about 100px back to the gallery that was opened. It is not a lot, but I should stay at the same position after closing the Magnific Popup.
Thank you for your help.
Described issue
Try autoFocusLast:
autoFocusLast: false
To prevent last focused link/image after popup close. Option available since 2015/12/16.
try setting the 'fixedContentPos' to false like so:
$.magnificPopup.open({
items: {
src: '#popup-exit-form' //ID of inline element
},
fixedContentPos: false,
type: 'inline',
removalDelay: 500, //Delaying the removal in order to fit in the animation of the popup
mainClass: 'mfp-fade mfp-fade-side', //The actual animation
});

Selecting popup without title and clicking button inside it with geb

I have a popup without title and I want to detect the window using any other criteria (for example a div that wraps the whole popup) and click a button inside it.
I've tried the following:
when:
withWindow({ $("div", class:"main.msgAlert" )}) {
$('#close').click()
}
then: true
But I always get a org.openqa.selenium.ElementNotVisibleException at te #close action.
Am I failing at detecting the window or is the error related to the button?

how to keep scroll on modal popup called from an other modal window

here my problem:
I open a modal popup and I can scroll it properly, then when I open a new model popup from this one if I try to scroll down this popup the scroll is on the main webpage in background. How can I focus the scroll on the active modal popup?
thank you

Hide all collapsable divs on 'hamburger' menu click

I have a Bootstrap navbar.
clicking on the hamburger icon will open a menu.
One of the menu item is a button for another collapsable div.
i added this to this button:
$('.nav a').on('click', function(){
$(".navbar-toggle").click()
});
This will close the navbar menu and will show another div.
What i want is clicking on the hamburger icon again will CLOSE the new div and will NOT open the menu.
Basically what is need is the navbar-toggle to close all collapsable div and will open the menu only if there isn't any other div open.
This is my example: http://www.bootply.com/FqZYHFSWrh
Scroll down to get 770px page width
click on login, you will see that the menu disappear.
The next click on the hamburger icon i want to close the login container.
The second click (after the login container is close) i want to open the menu again.
You could add an event handler such as:
$('button.navbar-toggle').on('click', function(event){
if ($('.login-collapse').hasClass('in')) {
event.stopPropagation();
$('.login-collapse').collapse('hide');
}
});