Clicking on Twitter Bootsrap 3 Modal Background - javascript

I am using bootstrap 3 to show a modal on top of a map with spots. I'd like users to be able to click on the spots on the map without the modal exiting.
I already have set the modal background to static so it doesn't quit when you click outside the modal but reducing it's z-index still doesn't allow the spots to be clicked on.
Anyone know how to do it, tried googling but seems like i'm the only one with this weird need

I am not sure if I understood correctly, but do you just want to keep the modal open, even if a user clicks outside of the actual dialogue? If yes, this answer might help you. It says to change data-backdrop to static :
<a data-controls-modal="your_div_id" data-backdrop="static" href="#">

Quick and dirty solution is to reduce the length of backdrop element which works for me because modal is not the left and map is on the right with both sharing equal status in terms of interest

Related

Web Design - Modal CSS Change to Display Block on Site Exit

I am trying to implement an easy way of displaying a small modal window when the user exits my Website, containing a quick and easy single question dialog, with a multiple-choice answer, and a submit button..
I'm having trouble finding a simple, straight-forward answer everywhere I've looked. Yes, I searched.
NOTE: I already have my Modal Window created, with the Form on it, and everything ready! (currently the Modal Window is set to Display None, until I figure out the following question)..
What I need to know exactly is this: What is the easiest way to simply detect when the user is leaving my website, and set the Property of the Modal Window ID to Display:Block for example, which would change it from Display:None and make it show?
I would prefer a simple script being able to detect any of the following behavior as they are trying to exit the website either by (A) clicking X on the tab, (B) clicking X on the window, or (C) hitting the back button enough times to leave my Site - at which time, the script would change my Modal's ID property from display none, to display block.. Thats it.
Thanks in advance!
JavaScript has a special event for this onbeforeunload
<script>
window.onbeforeunload = exitFunc;
function exitFunc() {
modal logic here
}
</script>

Modal mask appears over modal element

I have a modal pop up that needs to be fired from an article in a module, I need to have this format. The modal pop up is behind the modal backdrop and positions in relation to the module.
I get that its taking the parent relative position of the article in the module but I need to stop it without breaking the page layout.
In other words I need this page: http://my-healthy-living.co.uk/weight-management/herbalife-core-nutrition-formula-1-meal-replacement-shakes
To behave like the pop ups in this page :http://my-healthy-living.co.uk/weight-management/herbalife-protein-shake-solutions
With it in front of the backdrop and central to the screen. Please help!
Ignore please, was trying to post comment on my phone but added as an answer!!! Can't find delete on the darn app....
He means the actual code for the modal and any relevant JavaScript and PHP.

Bootstrap multiple modal dismiss all with the last modal

How can i create multiple overlapping modal popups, and dismiss all the modals with the close button (data-dismiss) on the last modal.
Thanks in advance.
You should be able to create multiple modals, that will naturally overlap each other based on the order they were clicked in. Then, on whatever modal you want to be able to close all modals, you can use this, adjusting it to your liking:
$('.modal').modal('hide');
Stacking modals isn't supported out-of-the-box in Bootstrap, you'll need to fiddle with the JS (& possibly CSS) yourself:
Overlapping modals not supported
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

Is there a way to have multiple dialog boxes with Twitter-Bootstrap?

I am using Twitter Bootstrap for everything and it's great but am at the point where I need multiple dialog boxes on the screen. I have not been able to find in the documentation how to do this so I'm assuming it is not something that is included.
I'm looking for something similar to jQuery-UI dialog boxes (NOT modals)
Is there a way to achieve this with Twitter Bootstrap without writing a new piece of code?
There is not problem in doing so. I've a project where it is working fine. There is one 'glitch' the backdrop is stacked so the backdrop (if you use it) of the first dialog is leading and for every dialog one gets stacked on top of it. The dialog you opened first is not greyed out. So probable you want to load you dialog with .modal("show", {backdrop: false}) after the first one and if possible you want your dialogs to be of the same size or bigger then the previously opened dialogs to circumvent the problem.
In our case it's an internal application, so this is not a big issue. But for a public website I could imagine this is a showstopper.

jQuery Facebox delay

I need a very FAST and lightweight jquery based Modal box on my site, I am looking at Facebox http://famspam.com/facebox
It is a nice plugin and it seems fast and lightweight but I think I can still strip out some of the features I do not need. For example I do not need it to use regex and find photos, so I have removed that part of the code, also I do not want the box to close whenever you click anywhere or the escape key. I have this partially done, I removed the code that makes the escape key close the box but I have not figured out how to make it only close programaticly or when clicking the close button only, right now it closes on any click outside of the box.
Now I have one issue I have not been able to figure out yet, there appears to be 2 spots in the code that control the delay of fading the box in and out, they were set at 200 and I changed them to 0 and tried several other number combinations but I can not seem to get the speed to be faster (less delay).
Does anyone know how to remove the delay in opening a facebox? Also how to disable it from closing when you click anywhere outside of the box?
To disable closing it from clicking anywhere outside,
you can find something called "overlay : true"
change it to "overlay : false,"
To close it with-out delay, You can find something like '$(document).bind('close.facebox', function() {'
there, change
"$('#facebox').fadeOut(function() {"
to
"$('#facebox').hide(function() {"
I use the thickbox for one project, pretty fast. Check also this list. I recommend you to keep the closing by clicking outside the box option, a real help for users.
Instead of hacking facebox, I would try something more configurable.
I've used jqModal to create modal boxes, which display instantly, can't be closed except when certain conditions are met, etc

Categories

Resources