I want a bootstrap modal to appear on the bottom left corner of the page on page load and allow it to disappear only when the x button is clicked and not when clicked anywhere on the screen. I have got these working till now but the next issue is that when the bootstrap modal is loaded it prevents any background activity like page scrolling or link clicking or any such thing and adds a background shade with opacity in front of the screen. How can I make the shade disappear and allow accessing the website while the modal is loaded and displayed in the bottom left corner?
Here are my codes.
<script>
$(document).ready(function() {
$(window).on('load',function(){
$('#myModal').modal('show');
});
$('#myModal').modal({
backdrop: 'static',
keyboard: false
});
});
</script>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<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>
Sounds like your not after a modal dialog, but something that looks like one.
You can still render a modal, but don't call .modal on in, and then just handle the close events yourself.
eg.
$(document).ready(function() {
$(window).on('load',function(){
var m = $('#myModal');
m.show();
m.find("button").on("click",
function () { m.hide(); });
});
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myModal" class="modal show" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</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>
Related
For those code, there have a button "Launch modal" to open the Model, then in Model, also have a button "Launch modal2" to open a new model(just call model2) on Model. When I click the close button on model2, all of the Model will de dismiss. How can I fix that?
Please note that I need to put model2 in Model for display data.
Thanks.
http://jsfiddle.net/ve42xs6w/
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
<br>
<br>
<br>
<br>
<br>
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal2</a>
<div class="modal" id="myModal2" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Second Modal title</h4>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
The problem is that you are putting the second modal inside of the first modal. Bootstrap just closes all modals that the close button is inside of, so if you nest them the second close button will close all outside modals.
To fix this you can just move the whole div#myModal2 down under the first div#myModal so they are separate elements.
Like this: http://jsfiddle.net/e92o1j3s/3/
i want to show popup dialog box in asp net using js but it not working!
here is my code
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal" id="myModal" 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>
The behaviour: when i click the button, the popup dialog not shown and the page become disabled(gray shadow).
when i remove ( class= "modal"), it shown put also everything is disabled!!!
Did you add bootstrap.min.css, jquery.min.js, bootstrap.min.js in the view or the main layout?
I am trying to open a modal popup from a javascript block. This is a basic modal that I found in w3schools: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal&stacked=h
Here is my code :
<script>
function showModal(){
window.location.href = '#myModal';
}
</script>
<!-- Modal -->
<div class="modal fade" id="myModal" 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>
Instead of JavaScript you an use default bootstrap function
function showModal(){
$('#myModal').modal('show')
}
window.location.href does not have what is known as a setter, which means it cannot be assigned a new value. It does have a getter as standard (a requirement, really), so you can get it.
If you want to open a link, try window.open("#myModal");, or use jQuery with $('#myModal').modal('show');
I have a simple html design with an animated menu. I am trying to implement bootstrap on it and make modal window. But when someone clicks at contact, my animated menu stops working. Here you can check the problem.
My modal code here. I'm using #mymodal on menu link.
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" 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>
You can do this using Jquery
$(document).on("click",".menu",function(){
$("#myModal").modal("show")
})
I've got a google table that listens to a select event and then shows a modal bootstrap. Is it possible to have my modal text display data from the selected row?
google.visualization.events.addListener(table, 'select', function () {
var row = table.getSelection()[0].row;
alert(data.getValue(row, 0))
$("#myModal").modal();
});
The alert shows the string I want in my modal window as well.
With the following modal:
<div id="myModal" class="modal fade" 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 edit-content">
<p id='inputId'>Display text here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Try
var modalcontent = data.getValue(row, 0);
$("#inputId").html(modalcontent);
right before $("#myModal").modal();
Here you can find the doc for this method.