Bootstrap modal dialog set attributes from javascript - javascript

How to set theese attributes: data-backdrop="static" data-keyboard="false" to modal that is opened from javascript with:
$('#myModal').modal('show');
?

In JS you can do this:
$('#myModal').modal({show: true, backdrop : false, keyboard : false});
In HTML you can do this:
<div class="modal" id="myModal" role="dialog" data-backdrop="static" data-keyboard="false">
Use the second one only if you want it in HTML and always want these attributes.

Related

Removing Modal backdrop on a single Modal using jquery

I have a single modal that is receiving styling from the global site.css due to having several other modals within partials, and keeping with DRY I want to alter only this one by removing the Modal Fade In class. Currently, my jQuery is ignoring this.
jQuery
if (modal.hasId('#modalBanner')) {
$('.modal fade in').removeClass('modal fade in ');
}
HTML:
<div class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" id="modalBanner" role="dialog">
<div class="modal-dialog modal-dialog-FullWidth">
<div class="modal-content">
<div class="modal-header" style="text-align: center">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
Use this code in your jquery to remove modal backdrop:
$('.modal').remove();
$('.modal-backdrop').remove();
$('body').removeClass( "modal-open" );
$(".modal.fade.in")
Use that as your selector, it says a selector with a class of 'modal' 'fade' and 'in'
Alright.
$('#modalBanner').removeClass('modal fade in');
Should do the trick.
You can access the element by ID then, just remove the classes you want.

Twitter bootstrap 3 modal open on page load without effect

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">

How to initialise Bootstrap data attributes API?

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>

Run javascript code on page load (twitter-bootstrap popup)

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");
});

Twitter-Bootstrap Modal not working Properly

I had created a modal dialogue
Launch demo modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
</div>
i just called the modal from..
$("a#LaunchDemo").click();
but the modal is just blinking on the screen, i also called the modal through button click .same problem iam getting , where i went wrong?,Please help ..
You need to execute your javascript code when the DOM is fully loaded. And use modal instead of click
$(document).ready(function() {
$('#LaunchDemo').modal(options)
});
Demo: http://jsfiddle.net/MgcDU/1998/
It wrong when the with of model was too big.
You can try when set the stylesheet for modal class in bootstrap file {width:900}
It will happen....
Try removing the class hide from the modal div:
<div id="myModal" class="modalhidefade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Remove the href="#myModal" in the hyperlink tag because that is trying to link you to a part of the page.
Also, you shouldn't need to specify the element type in your selector. It will be faster to just search for the element by ID.

Categories

Resources