I have a silverlight page in which I want to add a modal bootstrap. My problem is that the modal is displayed behind the silverlight page.
I saw that this can be happening because modal div is not isolated from the rest of your code, but in my case it is in the bottom of the code. Here is the source code
In the bootstrap CSS file increase the zindex if you have included a CDN. The use .modal{z-index:300}. Increase the 300
Related
I have an online form, that i would like to do through stacking modal windows (it just makes sense that way). upon opening both modal windows and then closing the top most one however the scroll bar comes back up from the content bellow the modal window.
here is an example:
http://www.bootply.com/FGNRPwSRgH
Just look on the right side of the screen when closing the second window.
Is there anything I can do about this? I am new to Bootstrap and I am hoping to be able to fix this through CSS and bootstrap only, however javascript isn't out of the question.
When you open your first modal, The body tag of the iframe is getting a class of "modal-open" which is disabling the scrolling, that remains when you open the second modal. When you close that second modal, the "modal-open" class is being removed, which is why the scrolling is coming back. This is probably due to the way you're nesting these modals. It just wants to remove that class from body, not knowing that you still have one open. You will most likely need to add some sort of check step with javascript to determine if you still have a modal with a display property of block when closing each one, and if so make sure that modal-open class is still set on the body. I would look for a callback function on the close of those modals that you can listen for.
http://www.bootply.com/8K2wKO0c7I
$('body').append(
$('<script />',{src:'//rawgit.com/sbreiler/bootstrap-multi-modals/master/bootstrap-multi-modals.js'})
);
If it works for you, grab a copy of the *.js file from my github: https://github.com/sbreiler/bootstrap-multi-modals
I created my own home automation web app. To authorize actions the user needs to enter a pin. Instead of using an input/password field I want to use a dial/number pad.
I decided to go with this snippet. My big problem is: I'm not good with CSS. I understand HTML and can work with it (at least with Bootstrap). But I have not learned CSS yet.
But I want to display the number pad in a modal (which pops up when the user tries to press the "Turn of PC" button for example).
I copied the css and html from the link. But this is the outcome:
Can someone explain me which part of the css is causing this?
Thanks
Remove the <div class="container"> from the modal body, and change the class on your phone tag to col-md-8 col-md-offset-2 phone.
Updated JSFiddle
Full-screen results
I was wondering if there were any online resources to creating a fullscreen modal without using Bootstrap. I'd like to learn how to implement this myself. The full effect would be a scrollable overlay for a projects section so if the user wants to view more of a project they can click on the image and a fullscreen box overlays the current page with the ability to close when done.
I think, this animatedModal will handle it.
http://joaopereirawd.github.io/animatedModal.js/
I dont know why once I put the bootstrap modal into my page, the content will move to left, and return back to its position after the modal box closed.
This wont happen to short html page, only for long html page where there is a horizontall scrollbar..
Can anybody tell me what is happening?
I check bootstrap website but It didnt happen so.
I downloaded the newest version and did not change any of the modal css.
You are likely encountering https://github.com/twbs/bootstrap/issues/14040 , which is a known open bug.
Im using Bootstrap on a website where a page has a few modals.
Using Chrome Dev Tools i was testing the network usage and noticed that the images in the modal view are called/pre-loaded when the page loads - I guess that makes sense they are all in divs on a single page.
So my question is it possible to avoid that div from running only until the actual link to a particular modal is clicked?
Thanks.
Use $.get or $.load in the click event handler of the button to display the modal.
Note that the HTML data you load via this ajax technique must be in the right bootstrap modal template.
See this gist here