I have a authentication page which use the modal to display the form.
If login/password are correct, users got redirected to a SPA.
If they are not correct, I'll need to show the exact same page with the login form open and an error message.
Is there a way to show a view with the twitter bootstrap already open, no effect/delay.
I also need to have the data-dismiss button act like he is supposed to.
Here is a jsfiddle : http://jsfiddle.net/3kgbG/267/
// no black overlay, dismiss not binded
Here's a fiddle where it automatically opens - fiddle
Pulled that right from the Bootstrap site - Bootstrap Modals
$('#myModal').modal('show');
For a pure HTML approach:
The wrapper for the modal has a class fade. This class is what provides the animation, so not adding the class will cause the modal to just appear.
You can then add data-show="true" so that the modal opens when it is initialized.
$( document ).ready(function() {
$('#myModal').modal({
//options for modal
})
});
This will open your modal on document ready. Check out any additional options here
To remove the fade effect you have to remove it from the modal wrapper class:
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
Becomes
<div class="modal bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
Related
When i run following command in chrome console
$("#inactive-selected-requests-modal").modal("show")
it does not display modal and overlay comes there. the chrome console output is:
<div class="modal fade" id="inactive-selected-requests-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" style="display: none;"></div>
Remove style="display: none;". It has solved the problem for me.
Problem is with below function, i was deleting the modal html instead of modal body
$(document).on("hidden.bs.modal", "#inactive-selected-requests-modal", function () {
$("#inactive-selected-requests-modal").html("");
});
To correct i change above function line to:
$("#inactive-selected-requests-modal-body").html("");
I have two pop up divs, one for login:
<!-- sign in Modal -->
<div class="modal fade login_popup" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
....
</div>
One for signup:
<!-- sign up Modal -->
<div class="modal fade login_popup" id="sign_up" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
The problem is when I try to click the sign-up pop up from login, closing the sign up afterwards hangs the first opened pop up(login), it doesnt scroll or anything.
What I need is to have only one pop up opened at a time and no hang up.
I tried triggering click on the second pop modal and triggered first pop up close. It closes the first pop up but still the pop up hangs up.
I've placed a button to activate a 'twitter bootstrap modal' on the 3rd tab within a 'navtab'. When the modal button is clicked there is a short delay then the 1st tab of the navtab is set to active. At no point is the modal visible.
My assumption is that the modal defaults to the first tab and that when the tab changes from tab 3 to tab 1 an event is fired that causes the modal to close.
Which leads me to the question: how can I set the modal to activate on tab n rather than tab 1?
Am I completely wrong about what is happening here? Any help would be appreciated. Thank you
<button class="btn btn-primary" id="tester">Detailed</button>
<div class="modal fade bs-example-modal-sm" id="mymod" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>
<script type="text/javascript">
$(document).on('click', '#tester', function(){
$("#mymod").modal('show');
});
</script>
My problem was that I didn't have the proper javascript library loaded for bootstrap.
Adding bootstrap-modal.js to my static assets solved my problem.
This has bugged me for a while, when using the JavaScript components, I can't seem to figure out how to use them via the Data Attributes API, the so called first class API.
E.g. the modal, as per the documentation:
Add Mortality Table
<div id="CreateTable" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Hello
</div>
Now from I can tell all I need to do is have bootstrap.js include on the page and when I click the link, the modal should pop up.
But it doesn't I need to add an event listener like so:
$('.modal').click(function(){
$("#CreateTable").modal();
});
Only then the modal will open, is there something I am missing? Do I have to intialise the bootstrap.js?
That seems to be working. I copied your html into a jsfiddle here.
Add Mortality Table<div id="CreateTable" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">Hello</div>
JSFiddle Link
try this:
<script>
$(document).ready(function() {
$("#CreateTable").modal();
});
</script>
I wrote some code using twitter-Bootstrap and .net to show a popup when you press the button. Here is my code piece:
Launch demo modal
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
<p>... some info...</p>
</div>
</div>
when I press the button, the popup appears. But I want to make appear the popup on page load independent from the button. How can I make this maybe using javascript or something else?
Use window.onload.
window.onload=function(){
$("#myModal").modal("show");
}
Yes you can just trigger it on page load.
$(function() {
$("#myModal").modal("show");
});