I am using Fancybox3 to open iframe in popup, but I need deny close on click on overlay, because in iframe is form, which user must fill out.
I tried edit outsideClick parameter 'close' to 'false' in fancybox.js and this guide too, but it's still closing on click on overlay.
Can somebody help me? Thanks.
Simply use clickSlide option. v3 works as a slider and is highly customizable (for example, you can resize and/or reposition sliding area), therefore there is a seperate options for clicking the slide and overlay element.
Related
Quick note : I have read other similar questions, but they are all about modal opening up as overlay on body and they want to stop scroll on body.
But in my case, when I open the toggle the page autoscrolls and I don't want that to happen I want it to stay at same place.
Here is the link ( http://isma.tomorrowing.today/ ) where you can see the issue in test text 2 or 3 section by clicking any of the 'Read Text' button.
I want the webpage to stay at some position even when toggle is opened.
Although I am using elementor in Wordpress on the website, but custom CSS or JS works for me as well.
Highly appreciate any help.
The issue I'm having is that when a modal is opened, the background body is scrollable using the mouse wheel.
Seems like this problem is known and people have suggested to set the body to overflow:hidden as stated in this link:
Prevent BODY from scrolling when a modal is opened
which works fine if your page is short and the modal link is on the initial visible page. However, if you have a longer page and you have to scroll down to see the modal link, once you click to open the modal, the background body shifts to the top.
The background does not scroll anymore, which is what I want, but is there any way to prevent it from popping back to the top when the modal is opened? It's inconvenient when you need to add multiple entries of something using the modal and you have to keep scrolling down to click the modal link to add another item.
In your onclick(I'm guessing you use onclick) event-method insert a return false; at the end, that will prevent the site from scrolling to the top.
I was having a similar problem in which modals larger than the window were cut off, and scrolling anywhere would scroll the background and not the modal.
This question pointed me to this plugin which is simple to use and fully addresses mine in addition to your problem of not permitting the background to scroll:
However this issue is said to be resolved in Bootstrap 3 and the plugin should not be needed if you're using the current version of Bootstrap.
If you go to http://www.sharethis.com/ and click on the green shareThis widget next to the text 'Try it out', you'll see a window pop-up.
I've noticed everyone is beginning to use a pop-up window with this style.
What's this? Is it just a div or a new browser window? How to achieve this effect?
Check out any one of these:
Lightbox
Lightbox2
Fancybox
I guess the popup-window is actually two divs, one which darkens the site, one for the window.
Also guessing: both could use the "opacity" and "z-index" css attributes.
I have the following usecase:
A div with some buttons
When the user
clicks on a button, a popup is shown
and the background div is faded out
to 0.5 opacity
The problem is that when the popup comes in, the user is still able to click on the background buttons. At this point, I can remove the entire DIV temporarily but I don't want to do that. Is there anyway I can disable all the previously attached events and then add event handlers ONLY to the current popup? (I mean something like a close button should still work on a popup) Any suggestions?
Sounds like you need a modal popup. There are numerous jQuery plugins that do that, or you can check out this tutorial.
You could store each element with an attached event into an array, then loop through them and unbind() them. Upon closing the popup you can re-bind() them.
You can use the modal dialog option built into JQuery UI
http://jqueryui.com/demos/dialog/#modal
$("#dialog-modal").dialog({
modal: true
});
I'm creating a firefox add-on, and I have a situation where if someone clicks on a specific item in my toolbarbutton menupopup, I want to display some text to appear beside the mouse for a couple seconds. I don't mean mouseover text, because when they click on the item, then I close the menupopup. I mean something like what's shown at this site:
http://www.kingsquare.nl/cursormessage
The normal way of doing this would be with javascript and a div that would have the text I want to show. Unfortunately, I've discovered that the toolbarbutton can't have an effect on the main window, which is where I'd need to place the div to show. I've tried getting Jquery to work and haven't been successful either.
You can use panels together with openPopup() and hidePopup(). Remember to set the attribute noautohide to true on the panel.
More info on panels - https://developer.mozilla.org/en/XUL/panel