I have a modal that shows various information, triggering a single modal works perfect. However, when I try to apply Bootstraps' grid logic to place 2 side-by-side modals, I'm failing. This is the code of a single modal:
<div class="modal fade bd-example-modal-lg" tabindex="-1" id="my_modal" role="dialog"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Raw Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body modal-body-right">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
FWIW I'm loading the modal via JS using:
$('.modal-body').load("/path/to/modal.html", function () {
$('#my_modal').modal({
show: true
})
});
How can I place those two modals side by side? Thanks!
Use CSS to position the .modal-content...
#modal1 .modal-content {
margin-left: -50%;
}
#modal2 .modal-content {
margin-left: 50%;
}
Demo: https://www.codeply.com/go/V4Eda15hEJ
Related
I'm having a problem with my login modals. One modal open when someone click forgot password link on my sign in the modal. (One modal open in another modal) So I came everything clean by adding all necessary attributes.
Eg:
<span data-toggle="modal" data-target="#forgot-pin-popup" data-dismiss="modal">Forgot password?</span>
But I notice it won't add .modal-open class to the body when my second modal is open(styles are shown weird without this class). So I manually use this js script.
$('.modal').on('hidden.bs.modal', function () {
if($('.modal').hasClass('in')) {
$('body').addClass('modal-open');
}
});
Works perfectly BUT when I try switching models like 6 times. It won't work again. Can't imagine why. I can't show you an example because it's on my production site. Does anyone face the similar problem like this?
Try to do using modal id
On modal show
$('#forgot-pin-popup').on("shown.bs.modal", function() {
$("body").addClass("modal-open");
});
On modal hide
$('#forgot-pin-popup').on("hide.bs.modal", function() {
$("body").addClass("modal-open");
});
what about using a global event listeners:
$(document).on('hidden.bs.modal', '.modal', function () {
$('body').toggleClass('modal-open', $('.modal').hasClass('in'));
});
Try to use body instead of .modal
$('body').on('hidden.bs.modal', function() {
if ($('.modal.in').length) {
$('body').addClass('modal-open');
}
});
Also make sure that your modal should not be nested into .modal class
$('body').on('hidden.bs.modal', function() {
if ($('.modal.in').length) {
$('body').addClass('modal-open');
}
});
$(".btn-primary").on("click", function() {
console.log($("body").attr("class"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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-primary btn-lg" data-toggle="modal" data-target="#myModal1" data-dismiss="modal">
Open modal
</button>
</div>
</div>
</div>
</div>
<!-- Modal1 -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Hi am try to use bootstrap modal inside of fixed positioned parent element.
But seems like its not working as expected.
Here is an example,
<div class="fixed">
<div>
<div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-target="#myModal" data-toggle="modal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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>
</div>
</div>
</div>
https://codepen.io/anon/pen/yMPOpo
Note: I would like to keep my HTML structure as it is.
You just have to lower the z-index of backdrop of modal,
Try this simple CSS and you are good to go
.modal-backdrop{
z-index:-1;
}
What is the issue? it's not clickable?
Trying setting the modal to position:relative and give it a z-index.
See here:
https://codepen.io/anon/pen/wJPWdr
.modal-backdrop.in {
position:relative;
z-index:100;
}
Short answer: Remove fixed class
Codepen: https://codepen.io/anon/pen/dvZXVG
Here, a question with the same issue: z-index not working with fixed positioning
or MDN documentation: The stacking context
my bootstrap modal is appearing blue line at the top and bottom of the modal. I didn't know why the blue line is appearing at the top and bottom of the modal. I want to remove the blue line. I am weak in English please apologize me if I made any grammatical or spelling mistakes.
HTML CODE:
<div class="modal fade bs-example-modal-sm vcenter" id="deleteconfirmation" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<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" style="text-align:center">Are you sure you want to Delete it?</h4>
</div>
<div class="modal-body">
<div class="form-group" style="text-align:center">
<h6>By clicking on Yes button your ad will be Delete.</h6>
</div>
</div>
<div class="modal-footer" style="text-align:center">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary" id="sayyes">Yes</button>
</div>
</div>
</div>
</div>
CSS CODE:
.vcenter{
position: relative;
top: 50%;
transform: translateY(-50%);
}
IMAGE:
Just add this style style="outline: none !important" to your main div.
<div class="modal fade bs-example-modal-sm vcenter" id="deleteconfirmation" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" style="outline: none !important">
The blue lines will be gone.
Probably you are over ridding some styles,
<div class="container">
<h3>Modal Example</h3>
<div>
Launch Modal
</div>
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
<style>
DEMO
I have one modal inside another modal and I've managed to make the inner one close without affecting the other. The problem is that when the second modal is closed it triggers the 'hidden.bs.modal' event for its self and for the first modal.
<!-- My Html -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open demo modal</button>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog modal-sm">
<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">Demo Modal</h4>
</div>
<div class="modal-body">
<p>
Upload image
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<div class="modal" id="uploadImage" tabindex="-1" role="dialog" aria-labelledby="uploadImage-title" aria-hidden="true">
<div class="modal-dialog modal-sm">
<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="uploadImage-title">Upload new image</h4>
</div>
<div class="modal-body">
Testing Area
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="btnUploadCancel">Cancel</button>
<button type="button" class="btn btn-success">Accept</button>
</div>
</div>
</div>
</div>
</div>
<!-- My JS-->
$('#btnUploadCancel').click(function () {
$('#uploadImage').modal('toggle');
});
$(document).on('hidden.bs.modal', '#myModal', function () {
alert("hello");
});
$(document).on('hidden.bs.modal', '#uploadImage', function () {
alert("goodbye");
});
Here is a jsFiddle example that I made.
The reason for this question is that I need to trigger an action only when the second modal gets hidden and then something else when the first one gets hidden. Any ideas on how to fix this using the event for each of them???
Note: The second modal has to be inside the other as they are called as a partial view.
I'm guessing that these modal elements are being introduced to the page asynchronously, and that's why you're using a delegated event listener bound to the document rather than binding hidden.bs.modal directly to #myModal and #uploadImage themselves. If this is not the case, and you can get away with binding directly, I'd suggest using this approach to catch the hidden event on #uploadImage itself, and prevent it from bubbling up the DOM tree using something like event.stopPropagation();.
Alternatively, though, you can continue to delegate this handler to the document, and use the target property of the Event object passed into your handler callback to determine which element was the actual source of the event:
$(document).on('hidden.bs.modal', '#myModal', function (event) {
if (event.target.id == 'uploadImage') {
// do stuff when the upload dialog is hidden.
}
else if (event.target.id == 'myModal') {
// do stuff when the outer dialog is hidden.
}
});
P.S.: As you may already know, the Bootstrap framework does not support overlapping modal dialogs. Be aware of this as you continue to nest modals within modals, especially concerning dismissal elements initialized via the markup API and data-dismiss="modal".
P.P.S.:
The second modal html doesn't have to be included in the first modal body. Include only the data-target link and move the second modal outside the first. This way the events will fire as you expect.
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open demo modal</button>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog modal-sm">
<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">Demo Modal</h4>
</div>
<div class="modal-body">
<p>
Upload image
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" id="uploadImage" tabindex="-1" role="dialog" aria-labelledby="uploadImage-title" aria-hidden="true">
<div class="modal-dialog modal-sm">
<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="uploadImage-title">Upload new image</h4>
</div>
<div class="modal-body">
Testing Area
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="btnUploadCancel">Cancel</button>
<button type="button" class="btn btn-success">Accept</button>
</div>
</div>
</div>
</div>
http://jsfiddle.net/wytf57mL/3/
I have looked through various questions on this site and other sites and tried their respective fixes but I haven't got any of them working for me. Whenever I open up my modal, an extra scrollbar is added. The extra scrollbar is of the modal, I know that, what I want to do is to hide the background-page's scrollbar so that it could prevent the background from scrolling. Right now, when the scroll of the modal is finished the background starts to scroll.
This is my modal's code:
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<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="myModalTitle">Modal title</h4>
</div>
<div class="modal-body">
<p id="myModalContent"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-thumbs-up"></span>
</button>
<button type="button" class="btn btn-default center"> <span class="glyphicon glyphicon-thumbs-down"></span>
</button>
</div>
</div>
</div>
</div>
Demo.
How could I prevent the background from scrolling?
Just add
body.modal-open {
overflow: hidden!important;
}
to your CSS.
Updated Fiddle