I am trying to disable the fade of a modal in bootstrap, but it will not work what ever I do, I have tried the below code but sitll not luck, I have looked all over google but no information on this I have noticed, except the 2 css things I have tried in the below code.
.dont-fade {
trasition: none;
opacity: 1;
}
I just want to disable the fade of a modal, and just have it like a div ontop of the whole page, without the fade.
Heres my html of my modal
<!-- Information on user popup -->
<div id="banModal" class="modal" role="dialog" style="">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Welcome!</h4>
</div>
<div class="modal-body">
<p>Hello, here is some test</p>
</div>
</div>
</div>
</div></div>
Related
I'm using Bootstrap Modal to load lightboxes with some resource-heavy content.
But the content is loaded immediately with the page. And since there's several lightboxes it slows the page down significantly.
I want the content to load only when the modal button is clicked. But I don't want to call the modal code from a separate page, since that would complicate everything.
Is there some way to use JS or AJAX to load the modal content only when the modal box opens?
Somehow trigger it to load when the button is clicked and then turn the content off, when the box is closed.
Also bear in mind that I don't know almost anything about JS or AJAX.
--EDIT: It would be great if the same solution could be applied to tabbed content--
The code I'm using:
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<iframe width='100%' height='368' src='#' frameborder='0' allowfullscreen></iframe>
</div>
</div>
</div>
</div>
we created a website where we want to show some examples of our cards as thumbnails, but when you click on it a larger picture should be displayed in a modal window. Now locally (windows machine) it works perfect, but once hosted (linux machine) the whole content (title, markup, picture, buttons) of the modal are displayed as a set of strange symbols.
The code of the modal:
<div class="col-md-4">
<a href="images/JUNO-FOTO-MW.png" class="thumbnail" data-toggle="modal" data-target="#ModalJUNO">
<img src="images/JUNO-FOTO.gif" alt="geboortekaartje Juno" style="width:200px;height:200px">
<p>geboortekaartje </br>Juno</p>
</a>
</div>
<!-- Modal -->
<div id="ModalJUNO" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Geboortekaartje Juno</h4>
</div>
<div class="modal-body">
<img src="images/JUNO-FOTO-MW.gif" title="geboortekaartje Juno" alt="geboortekaartje Juno wil nu eventjes niet laden" width="850" height="850">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The result of the hosted site
A part of the result:
Since it is not only the picture but the whole modal that is displayed like this, it does not seems like it is an encoding problem.
Any help is greatlty appreciated!
Remove href from your <a> tags.
I debugged bootstrap.js and found, that jQuery.load function is used to load modal's content.
Take a look at
http://getbootstrap.com/javascript/#modals-options
Read about remote option.
I am trying to open a Bootstrap Modal using the anchor tag. This is my HTML:
<ul class="dropdown-menu">
<li><a data-toggle="modal" href="#createModal">create group chat</a>
<!-- Modal -->
<div class="modal fade" id="createModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</li>
When I click on the anchor tag for create group chat, the background blacks out but the actual dialog box does not appear. My website has another Bootstrap Modal that load when the page first loads, so I am not sure if this problem is being caused by a naming conflict. This Modal is named createModal and the other one I am using is called myModal
Try moving the modal outside of the li element.
Also, to get the fiddle working, you just need to add the external references to bootstrap.
I'm working on a form that loads content from a checkbox menu.
If a user checks a box, a bootstrap v3.3.4 modal pops and the chosen content shows up in the modal.
Here is the code when the modal is closed:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">My Modal Title</h4>
</div>
<div class="modal-body">
<div class="box">MY CONTENT IS HERE</div>
</div>
<div class="modal-footer">Footer text is here</div>
</div>
</div>
</div>
When the modal is opened, a style is being added to <div class="box">
like this: <div class="box" style="display: block;">
I'd really like to add more styles to that div, but only when the modal is open. From where does the style get added? I've checked my jquery.js and bootstrap.js files and can't figure it out. Also tried various if statements to no avail. i.e. $('#myModal').is(':visible');
Thanks so much for any advice.
The easiest way is to check if a modal is opened or not is to check if the modalElement has the class 'in' appended to it when the modal is opened.
$('#myModal').hasClass('in')
Working example : http://jsfiddle.net/3kgbG/1151/
Implemented a modal of twitter boots trap....
It works fine when I don't put it in my site.....
After I included it in my site the modal shows up but does not slide from the top....
Actual modal
http://jsfiddle.net/nJ6Mw/1/
modal not sliding from top
http://jsfiddle.net/y88WX/12/embedded/result/
<div id="example" class="modal hide fade in" style="display: block;" aria-hidden="false">
<div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
<h3>This is a Modal Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>You can add some text here.</p>
</div>
<div class="modal-footer"> Call to action
Close
</div>
</div>
It might be because you have it within your #container div instead of outside of it in the body??
Hard to tell cause you're second fiddle doesnt compile right