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");
});
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'm trying to make a modal dialog prompt using bootstrap but when I click on my specific button I need to add the modal to but it doesn't work.
Below is my code for the modal section and below that is my button code:
<div class="modal fade" id="Register/Login" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Register/Login</h4>
</div>
</div>
</div>
</div>
This is my button code:
<li>Register/Login
</li>
#JordanMitch226, just try to rename the id, replace the '/' to underscore, and of course, don't forget to load the boostrap.js and boostrap.css in your page.
As said, change the ID of the modal to not have a /, include the bootstrap.js and bootstrap.css, and add a data-target to your button.
<li>Register/Login</li>
<div class="modal fade" id="RegisterLogin" role="dialog">
...
</div>
See my fiddle: https://jsfiddle.net/2m4vxcxz/
See Bootstrap's Modal documentation: http://getbootstrap.com/javascript/#modals
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">
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>