Using bootstrap 3.3.5 and trying to open a second modal, and found a strange behavior:
The backdrop do not show around the second modal, instead of it
covers the backdrop from the first modal
The second modal is
limited to the area of the first modal.
Check the example: http://jsfiddle.net/2zqe93u1/show/
Looking for a way to show the second modal with the backdrop around it and with no area limited by the first modal.
Code:
<div class="modal bs-modal-lg" id="FirstModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="FiltroLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<span class="modal-title">Title #1</span>
</div>
<div class="modal-body">
<div class="modal" id="SecondModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Title #2</h4>
</div>
<div class="modal-body">
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-number="2">Close</button>
</div>
</div>
</div>
</div>
<a data-toggle="modal" href="#SecondModal" class="btn btn-primary btn-block">Open the second modal</a>
</div>
<div class="modal-footer">
<a data-loading-text="Wait" class="btn btn-default">Cancel</a>
</div>
</div>
</div>
</div>
As said #Tim Lewis bootstrap doesn't support stacked modal and Showing more than one modal at a time requires custom code
First Remove 2nd modal HTML inside the First Modal and put it outside, so the HTML will be;
<div class="modal bs-modal-lg" id="FirstModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="FiltroLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<span class="modal-title">Title #1</span>
</div>
<div class="modal-body">
<a data-toggle="modal" href="#SecondModal" class="btn btn-primary btn-block">Open the second modal</a>
</div>
<div class="modal-footer">
<a data-loading-text="Wait" class="btn btn-default">Cancel</a>
</div>
</div>
</div>
</div>
<div class="modal" id="SecondModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Title #2</h4>
</div>
<div class="modal-body">
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-number="2">Close</button>
</div>
</div>
</div>
</div>
It will fix the problem second modal is limited to the area of the first modal.
Now to fix the problem backdrop do not show around the second modal, instead of it covers the backdrop from the first modal
add following code in JS
$(document).ready(function () {
$('#SecondModal').on('show.bs.modal', function () {
$('#FirstModal').css('z-index', 1039);
});
$('#SecondModal').on('hidden.bs.modal', function () {
$('#FirstModal').css('z-index', 1041);
});
});
Fiddle
You have to work with two modals separeted to achieve this goal.
The first point i can do it with this
https://jsfiddle.net/2zqe93u1/
$('#FirstModal').modal('show');
$('#SecondModal').on('shown.bs.modal', function (e) {
$('.modal-backdrop').first().appendTo($(this).parent())
})
$('#SecondModal').on('hidden.bs.modal', function (e) {
$('.modal-backdrop').first().remove()
})
$("button[data-number=2]").click(function(){
$('#SecondModal').modal('hide');
});
But i can't understand the second one, if the second modal can be dragged out of the first, why the backdrop must be on the first?
But with the events ocurring on modal i'm sure you can do this.
Take a look at jsfiddle to catch the ideas
Related
I am using bootstrap 4 and I added a modal in my form in laravel project.
Code:
........
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<button type="button" id="order-btn" class="btn btn-yellow-hub rounded-pill px-30">Procced</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="confirmOrder" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content modal-content-height">
<div class="modal-header" style="background-color: #D0D0D0">
<h5 class="modal-title">Order Confirmation</h5>
</div>
<div class="modal-body">
<p>Your credit balance will be charge RM{{$rate->cost}} for the invoice. Proceed this order?</p>
<div class="text-center">
<button type="submit" class="btn btn-primary confirm-pay-now ">Pay Now</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</form>
Basically, the data dismiss for close button is not working and nothing happens when I clicked it. I checked the bootstrap documentation and everything seems to be in order. Some of the solutions I have tried is removing fade class which does nothing. I also tried adding $('#closeButtonID').modal('hide'); but it does not seem to work as well.
How do I fix this?
Make sure If you use CDN then check you your internet connectivity or you use local library then try to go at view page source check that you local library correctly integrate with you webpage..
or I think you need to go through with below reference link try it
https://getbootstrap.com/docs/4.0/components/modal/
Can you try
$('#confirmOrder').modal('hide');
instead of
$('#closeButtonID').modal('hide');
Can you try giving it to the event handler of the button click as
$('. btn-secondary').on('click', function() {
$('#confirmOrder').modal('hide');
})
Try This
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<button type="button" id="order-btn" class="btn btn-yellow-hub rounded-pill px-30" data-target="#confirmOrder" data-toggle="modal">Procced</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="confirmOrder" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content modal-content-height">
<div class="modal-header" style="background-color: #D0D0D0">
<h5 class="modal-title">Order Confirmation</h5>
</div>
<div class="modal-body">
<p>Your credit balance will be charge RM{{$rate->cost}} for the invoice. Proceed this order?</p>
<div class="text-center">
<button type="submit" class="btn btn-primary confirm-pay-now ">Pay Now</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</form>
The command below works but the main page is waiting for iframe to load opening for him takes a long time sometimes.
How can I get the iframe to load just by clicking the shortcut.
<li>
carlist
</li>
<div class="modal fade" id="carlist" tabindex="-1" role="dialog" data-toggle="modal3" aria-labelledby="myModalLabel" data-backdrop="false">
<div class="modal-dialog modal-fluid modal-notify modal-success" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Car List</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="text-center">
</div>
<iframe src="carlist.aspx" width="100%" height="500"></iframe>
</div>
Maybe you could use a button. When onClick you try to open the iframe.
Is carlist.aspx part of your project?
I am creating a confirm dialog using Bootstrap 4 and the code goes like this
<div class="modal fade show" id="completeAlertDialogue" role="dialog" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirm Navigation</h4>
</div>
<div class="modal-body">
<p>You haven't saved your changes. Are you sure you want to leave this page?</p>
</div>
<div class="modal-footer">
<div class="order-2"><button class="btn btn-sm btn-primary" type="button" data-dismiss="modal">Yes</button></div>
<div class="mr-auto order-1"><button class="btn btn-sm btn-outline-secondary" type="button" data-dismiss="modal">No</button></div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
The styling is working fine in chrome, firefox, edge but not working in IE
Chrome
IE11
Created a fiddle for the same.
Try the following HTML structure for "modal-footer"
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="modal fade show" id="completeAlertDialogue" role="dialog" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirm Navigation</h4>
</div>
<div class="modal-body">
<p>You haven't saved your changes. Are you sure you want to leave this page?</p>
</div>
<div class="modal-footer justify-content-start">
<button class="btn btn-sm btn-outline-secondary" type="button" data-dismiss="modal">No</button>
<button class="ml-auto btn btn-sm btn-primary" type="button" data-dismiss="modal">Yes</button>
</div>
</div>
</div>
</div>
display flex is not full support in IE.
i change footer display flex to block, then its work. check bellow code
<div class="modal fade show" id="completeAlertDialogue" role="dialog" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirm Navigation</h4>
</div>
<div class="modal-body">
<p>You haven't saved your changes. Are you sure you want to leave this page?</p>
</div>
<div class="modal-footer d-block">
<div class="row">
<div class="col-sm-6"><button class="btn btn-sm btn-primary" type="button" data-dismiss="modal">Yes</button></div>
<div class="col-sm-6 text-right"><button class="btn btn-sm btn-outline-secondary" type="button" data-dismiss="modal">No</button></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
I am having trouble displaying a bootstrap modal on my site. The modal div is too tall and too narrow relative to the modal-dialog div.
This is where I am toggling the modal.
<footer>
<div id="header-footer-content" class="container">
Contact |
Privacy Policy
</div>
</footer>
And this is how I am defining the modal. (Note the modal is actually defined in a partial view in my rails project, but the html below is the result post-rendering.)
<div class="container>
<div class="row">...</div>
<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">
<p>some text</p>
</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>
I'm using the example modal from the bootstrap website, so I'm not sure why it's being displayed like this. Does anyone have any experience with this kind of graphical issue?
EDIT: I am using bootstrap v3.3.4. The site can be found here.
I think it might have something to do with the container div you have wrapped around your modal. Try removing that and maybe also try removing the empty row at the top of it too.
i need to get <div class="month">May 2015</div> and <div class="author">Alex Xander</div> by id="duyuru3483". How can i reach upper divs (XPATH code):
<div class="item">
<div class="dateBox">
<div class="month">May 2015</div>
<div class="day">07</div>
</div>
<div class="mainInfo">
<div class="title">
<a href="#" class="text-justify" data-toggle="modal" data-target="#duyuru3483">
2014-2015 Yılı Mezuniyet Töreni Hk.
</a>
<div class="modal fade" id="duyuru3483" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="background-color: #009E49;">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">
<div class="duyuruBaslik">2014-2015 Yılı Mezuniyet Töreni Hk.</div>
</h4>
</div>
<div class="modal-body">
<div class="duyuruMetni"> Mezuniyet törenine katılmak için yapılmasıgereken işlemler ve doldurulması gereken form ektedir. </div>
<hr>
<div class="author" > Ek : <a style="color:##428bca" href="../files/19_mezuniyet.rar">indir</a> </div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Kapat</button>
</div>
</div>
</div>
</div>
</div>
<div class="author">Alex Xander</div>
One option is to use Ancestors:
var modal = doc.GetElementbyId("duyuru3483");
var parent = modal.Ancestors()
.Single(e => e.Attributes["class"] !=null &&
e.Attributes["class"].Value == "item");
Another option is to use XPath:
var parent = doc.DocumentNode
.SelectSingleNode("div[#class='item'][//div[#id='duyuru3483']]");
(you can algo get directly to .dateBox using:
div[#class='item'][//div[#id='duyuru3483']]/div[#class='dateBox']
And, of course, you can just use ParentNode, but that is less robust:
var parent = modal.ParentNode.ParentNode.ParentNode;
All of these get you to .item - it should be easy getting the data from there.