I have a problem with bootstrap,
I included my modal with these lines of code (I use Jade):
<button data-toggle="modal" href="#myModal" class="btn btn-primary">Launch demo modal</button>
<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 id="myModalLabel" class="modal-title">Modal title</h4>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
When I click the button it opens the modal, but when I should close the modal, it just close the modal and leave overlay! I really don't understand why it happens...
These are the screenshot before and after close the modal:
BEFORE:
http://i.stack.imgur.com/UkcSe.jpg
AFTER:
http://i.stack.imgur.com/1Uovr.jpg
According to you what is the problem?
ps: don't touch behind, it still doesn't work well :p
Related
when you click "MAGIC" then a bootstrap popover is shown and there you see the settings icon. If you click that icon a modal window should open, like if you click on the blue button "Launch demo modal". How can I fix that? What is the problem?
Here my code: https://jsfiddle.net/vhsqf65z/
<span data-html='true' data-toggle='popover'
title='<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"><i class="glyphicon glyphicon-cog"></i></button>'
data-content='<b>content</b>'> MAGIC </span>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
Thanks
Edit:
Added an image showing the popover and settings button.
enter image description here
I modified your code, removed handling inserted.bs.popover event:
https://jsfiddle.net/05nzfcak/
I tested it works (if I understood correctly what you want)
I'm trying to get a modal to show on my bootstrap site, and when I click the button to trigger it the screen turns dark, but nothing shows up.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
This is the javascript I'm using as well, in addition to JQuery, popper.js, bootstrap js
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').trigger('focus')
})
I literally took this right off the bootstrap site and for some reason it's not working.
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').trigger('focus')
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
The code snippet for the modal is perfectly fine, Check the parent div for both trigger and the modal and raise their z-index, It very likely that the Z-Index of the parent element is interfering with the modal pop up. You can try this`
.parentElementOfModal{
z-index:10000;
}
I am having soon issues using the twitter bootstrap modal in my site. My site has the has bootstrap loaded and everything but the button is not trigger the popup and I don't know why. Can someone please help me?
This is the modal right after my body tag
<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">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
You can try this.
$(document).ready(function() {
$("#btnshow").on('click', function(event) {
$('#myModal').modal('show');
$('#myModal').on('shown', function() {
// do more here
})
});
});
sample button that calls your modal window
<button id="btnshow">Show</button>
<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">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers. Here’s the simplest possible example:
http://bootboxjs.com/examples.html
bootbox.dialog({
title: "That html",
message: '<img src="images/bootstrap_logo.png" width="100px"/><br/> You can also use <b>html</b>'
});
I would like to know how to create a custom dialog box that rises when button gets clicked n that box should be beside the the button...please help me out brothers
You can use Bootstrap model
http://getbootstrap.com/javascript/#modals
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<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">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I want to make a modal where in if I click the button the modal pops up and the content of the modal is from a different page. Please help me.
This is my code
Click to open Modal
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<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" id="myModalLabel">Basic Modal</h4>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I want to know what Javascript? and where exactly should I put it?
I'm using bootstrap v 3.03 by the way.
I think this is what you're looking for. You need to pay special attention to this line in particular:
<a data-toggle="modal" class="btn btn-info" href="remote.html" data-target="#myModal">Click me !</a>