Open modal popup on another modal popup - asp.net

I want to show a modal on another modal while its still visible.
I am unable to understand what should I do. I tried z-index but its not working for me.
Any kind of guidance is much appreciated.

Check it out this
http://getbootstrap.com/javascript/#modals-examples
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
<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="gridSystemModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
$(#id_name).modal("toggle") <-- popup
$(#id_name).modal("hide") turn off

try this
Data-dismiss: used for closing modal.
Data-toggle:used for popup modal.
<a data-dismiss="modal" data-toggle="modal" href="#ModalId">Click</a>
OR
you can use onclicke method.
<a id="ID" data-dismiss="modal" data-toggle="modal" onclick="functionShowModal()">Click</a>
Jscript
functionShowModal()
{
$("#ID").load("#ModalId");
}
You have to define z-index for them accordingly as well. You will find more about z-index here

Related

bootstrap - modal close button not closing

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>

Bootstrap 4 Modal styling (FlexBox) not working in IE

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>

Bootstrap: Use div as modal only for xs screens?

I have a two column Bootstrap layout on small screens and up. For the extra small size class, I'd like to hide the second column from the normal flow, and instead use it as the contents for a modal.
Is that possible in an elegant way (i.e. without moving it around the DOM with Javascript)?
Example:
<div class="row">
<!-- Main Column -->
<div class="col-sm-8 col-md-9">
Main contents blah blah blah
</div>
<!-- Secondary Column -->
<div class="col-sm-4 col-md-3">
Other contents. These appear normally in sm, md, lg. In xs, it should be the contents of a modal.
</div>
</div>
Sample modal (in which the secondary column should be displayed):
<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">
This is where I want the contents from the secondary column
</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>
Yes, you can do that by using jQuery's $.html() function to get the html of the column and then using $.html() again to place it in the modal. This, combined with Abdulla's recommendation, should give you what you want. Here is a demo I created:
$("#myModalBtn").click(function() {
$("#myModal .modal-body").html($("#myModalContent").html());
$("#myModal").modal("show");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<!-- Main Column -->
<div class="col-sm-8 col-md-9">
Main contents blah blah blah
<button type="button" class="btn btn-primary visible-xs" id="myModalBtn">Launch demo modal</button>
</div>
<!-- Secondary Column -->
<div class="col-sm-4 col-md-3 hidden-xs" id="myModalContent">
Other contents. These appear normally in sm, md, lg. In xs, it should be the contents of a modal.
</div>
</div>
</div>
<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">
This is where I want the contents from the secondary column
</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>
Click on Run Code Snippet then click on the "Full Page" link to see it in action.
Use hidden- property in Bootstrap.
Hidden-xs - Hidden in Extra Small
Hidden-sm - Hidden in Small
Hidden-md - Hidden in Extra Small
etc ..
Check this Responsive utilities

Bootstrap Modals - Modal id's different yet only one appears correctly

I'm having trouble with these modals in bootstrap. I have set the id for both differently yet only the first one appears when the "more" button is pressed. The second button does not show the required modal.
<div id="tf-team" class="text-center">
<div class="overlay" id="team1">
<div class="container">
<div class="section-title center">
<h4>Something</h4>
<h2 class="white">The Team</h2>
<img src="img/daag.png" alt="">
</div>
</div>
<div id="team" class="owl-carousel owl-theme row">
<!-- Team One -->
<div class="item">
<div class="thumbnail">
<img src="img/team/01.jpg" alt="..." class="img-circle team-img">
<div class="caption">
<h3>CEO name</h3>
<p class="blue">CEO</p>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal1">More</button>
</div>
</div>
</div>
<!-- Team Two -->
<div class="item">
<div class="thumbnail">
<img src="img/team/03.jpg" alt="..." class="img-circle team-img">
<div class="caption">
<h3>Marketing Executive name</h3>
<p class="blue">Marketing Executive</p>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal2">More</button>
</div>
</div>
</div>
These are the modals that should be appearing. The first modal appears as normal but the second doesn't even though the ID's are different.
<!-- Modal One-->
<div id="myModal1" 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">text</h4>
</div>
<div class="modal-body">
<p><strong>text</strong></p>
<p>text</p>
<p><strong>text</strong></p>
<p>text
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Modal Two-->
<div id="myModal2" 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">Dana</h4>
</div>
<div class="modal-body">
<p><strong>text</strong></p>
<p>text
</p>
<p><strong>text Tick</strong></p>
<p>text
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Does anyone have any ideas as to why this is happening?
You are just missing two closing </div> tags on the first modal.
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div id="tf-team" class="text-center">
<div class="overlay" id="team1">
<div class="container">
<div class="section-title center">
<h4>Something</h4>
<h2 class="white">The Team</h2>
<img src="img/daag.png" alt="">
</div>
</div>
<div id="team" class="owl-carousel owl-theme row">
<!-- Team One -->
<div class="item">
<div class="thumbnail">
<img src="img/team/01.jpg" alt="..." class="img-circle team-img">
<div class="caption">
<h3>Jim Rae</h3>
<p class="blue">CEO</p>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal1">More</button>
</div>
</div>
</div>
<!-- Team Two -->
<div class="item">
<div class="thumbnail">
<img src="img/team/03.jpg" alt="..." class="img-circle team-img">
<div class="caption">
<h3>Dana Apatachioae</h3>
<p class="blue">Marketing Executive</p>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal2">More</button>
</div>
</div>
</div>
<!-- Modal One-->
<div id="myModal1" 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">text</h4>
</div>
<div class="modal-body">
<p><strong>text</strong>
</p>
<p>text</p>
<p><strong>text</strong>
</p>
<p>text
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- You are missing these two ending </div> tags. -->
</div>
</div>
<!-- Modal Two-->
<div id="myModal2" 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">Dana</h4>
</div>
<div class="modal-body">
<p><strong>text</strong>
</p>
<p>text
</p>
<p><strong>text Tick</strong>
</p>
<p>text
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

align 2 divs in bootstrap modal

I don't know if my Title is clear enough.
I try to explain myself with dome code
I have HTML Modal dialog like this
<div id="ModalGraficoCompLav_0" class="modal fade" 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-hidden='true'>×</button>
<h4 class='modal-title'>Stato Componenti e Lavorazioni</h4>
</div>
<div id='ModalBody' class='modal-body'>
<div class='row'>
<div class='col-lg-6'> Componenti
<div id='GraficoComp0'class='ModalGraficoSmall'></div>
</div>
<div class='col-lg-6'>Lavorazioni
<div id='GraficoLav0'class='ModalGraficoSmall'></div>
</div>
</div>
</div>
<div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Chiudi</button>
</div>
</div>
</div>
</div>
the 2 divs col-lg-6 will be filled with jquery flot plugin.
In my css I have these rules:
.ModalGraficoSmall { width: 200px; height:100px;}
Setting width and height is mandatory for jquery flot, If I doesn't set width or height the chart won't appear anymore.
Now, for completeness I put also jquery flot scripts
var opts = {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 2 / 3,
formatter: function (label, series) {
return '<div style="font-size:11px ;text-align:center; padding:2px; color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
},
threshold: 0.1
}
}
},
legend :
{
show: false
}
};
$.plot($("#GraficoComp0"), dataComp, opts);
$.plot($("#GraficoLav0"), dataLav, opts);
this is my result:
what I would like to obtain is this:
Try this setup, in the modal I have 2 panels, just fill in the panel bodies with your chart!
Code:
<!-- 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>
</div>
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<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">Modal title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h3 class="panel-title">Chart One</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h3 class="panel-title">Chart Two</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
</div>
</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>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
Read about the bootstrap grid system here

Resources