I am trying to show a chart inside of a modal.
I am using Meteor with the maazalik:highcharts package. Initially, when the modal appears the chart is outside of the modal. As soon as I resize the window, the chart appears correctly inside the modal.
A button click event triggers:
$('#accountsDetailsModal').modal('show');
My modal sits in a template:
<template name="AccountsGraph">
<div id="accountsDetailsModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close on-close" data-dismiss="modal">×</button>
<h4 class="modal-title">Accounts Details</h4>
</div>
<div class="modal-body">
<div id="container" style="width:100%;margin: 0 auto">
{{> highchartsHelper chartId="accountsDetails" chartWidth="100%" charHeight="100%" chartObject=accountsGraph}}
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default on-close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</template>
EDIT: I replaced my click event handler and it worked.
$('#accountsDetailsModal').modal('show');
setTimeout(function(){
console.log("reflow");
$("#accountsDetails").highcharts().reflow();
},200);
add to your config object:
func: function(chart) {
setTimeout(function() {
chart.reflow();
}, 0);
}
Related
My knowledge in ASP.NET is very limited, yet, I am building a UI/UX design for an application that will be built in ASP MVC and I've heard rumors of the following problem:
When a Boostrap modal fires a button event (onClick), it creates a postback which in turn, it refreshes the page, thus making it impossible for multiple bootstrap modals to work. Unless the modals do not require to interact with the back end, which means they would simply serve a client-side purpose.
I need to know how much of this is true and if there is a way to create a search or populate a bootstrap modal with information being entered in a second modal.
Unfortunately, I can't produce a working ASP code but I will produce the HTML portion of it so you have an idea.
Again, my question is, can I populate modal 1 with information entered in modal 2? Modal 2 is invoked from Modal 1. See the code and Demo for details
<div class="container">
<h1>Working with Multiple Modals</h1>
<div class="margin-lg">
<button type="button" class="btn-first-modal btn btn-primary btn-lg" data-toggle="modal" data-target="#first-modal">
Launch Modal
</button>
</div>
<div class="modal" id="first-modal" data-backdrop="static" data-keyboard="false">
<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">First Modal</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-4">
<label class="label-control">My ID</label>
<input type="text" class="form-control" disabled/>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-second-modal within-first-modal btn btn-primary">
Add ID
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" id="second-modal" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-second-modal-close close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">ID Generator</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-4">
<label class="label-control">Choose ID</label>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-second-modal-close btn btn-primary">Add</button>
</div>
</div>
</div>
</div>
JS
var within_first_modal = false;
$('.btn-second-modal').on('click', function() {
if ($(this).hasClass('within-first-modal')) {
within_first_modal = true;
$('#first-modal').modal('hide');
}
$('#second-modal').modal('show');
});
$('.btn-second-modal-close').on('click', function() {
$('#second-modal').modal('hide');
if (within_first_modal) {
$('#first-modal').modal('show');
within_first_modal = false;
}
});
$('.btn-toggle-fade').on('click', function() {
if ($('.modal').hasClass('fade')) {
$('.modal').removeClass('fade');
$(this).removeClass('btn-success');
} else {
$('.modal').addClass('fade');
$(this).addClass('btn-success');
}
});
DEMO
This would let you make a request to the server and do something with the information that you get back.
$(".btn-second-modal").on("click", function () {
$.ajax({
url: "/urltoserver/action/",
cache: false
}).done(function (data) {
// SET YOUR FIRST MODAL PROPERTIES
// HIDE YOUR SECOND MODAL
// SHOW YOUR FIRST MODAL
});
});
I have two tabs First tab display me the details of employee whose age is less then 40 and the second tab display me the details of employee whose age is grater then 40 when I click the 1st tab and click the button show (whish is under 1st tab) pop up get generated for a form I have written it in bootstrap . But for the second tab when I click the button it only fades up no form is generated . When I used chrome debugger I found CSS for nodal fade is not getting generated automatically . I am new in Bootstrap please help me
<button type="button"
class="btn btn-info glyphicon glyphicon-plus"
data-toggle="modal"
data-target="#myModal{{$parent.$parent.$index}}{{$index}}">
Add URL
</button>
{{category.name}}{{$parent.$parent.$index}}{{$index}}
<div class="modal fade" id="myModal{{$parent.$parent.$index}}{{$index}}" role="dialog">
{{$parent.$parent.$index}} -- {{$index}}
<div class="modal-dialog" role="document">
<!-- Modal content-->
<div class="modal-content" >{{category.name}}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<p>
<input type="text" class="form-control"
name="uri" placeholder="Add URL" ng-model="uri">
</p>
</form>
</div>
<div class="modal-footer">
<button type="button" ng-click="addCustom()"
class="btn btn-success btn-sm col-lg-2 col-md-offset-3 glyphicon glyphicon-ok"
data-dismiss="modal">Add</button>
<button type="button"
class="btn btn-success btn-sm col-lg-2 col-md-offset-7 pull-centre glyphicon glyphicon-remove"
data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
I had this problem myself and found the solution. Bootstrap uses the following CSS media query to disable the modal fade animation (and a number of other transitions and animations) in certain circumstances:
#media (prefers-reduced-motion: reduce) {
.fade {
transition: none;
}
}
According to MDN, "The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of animation or motion it uses." They have instructions there for changing this on various operating systems. (The Windows method worked for me: Settings > Ease of Access > Display > Show animations [On])
Please try to this format for design & modal work.
<!-- 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">
<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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
http://getbootstrap.com/javascript/#modals
The seccond part, the modal part mus not be on the body. Move it just below the head ends, and before the body tag start.
<head>
.... //heade code here
</head>
MODAL HERE
<body>....
<button type="button"
class="btn btn-info glyphicon glyphicon-plus"
data-toggle="modal"
data-target="#myModal{{$parent.$parent.$index}}{{$index}}">
Add URL
</button>
...more code here
</body>
Your button can be inside the body, but your modal code should be outside of the main section.
<html>
<head>
</head>
<body>
<main>
<!-- button to trigger modal -->
</main>
<!--modal code here -->
</body>
</html>
When click to show, bootstrap adds this HTML somewhere at the bottom of the page:
If you want you can add it manually and try:
<div class="modal-backdrop fade show"></div>
I've got a web app running Twitter Bootstrap 3. Following an upgrade to 3.3, the modal backdrop breaks when I add content to the modal after it opens.
JsFiddle example, Bootstrap 3.2: Content is dynamically added to the modal after the modal opens, and the backdrop resizes appropriately.
JsFiddle example, Bootstrap 3.3: Content is dynamically added to the modal after the modal opens. When you scroll down, the backdrop is only as high as the window was before the content was added. If you resize the window, the backdrop finally resizes.
My modals are absolute bog-standard, straight off the Bootstrap demo. What gives?
<!-- 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>
<script>
$("#myModal").on('shown.bs.modal', function () {
var i = 1;
while (i < 100) {
$("#myModal").find(".modal-body").append("<p>Content " + i + " added after modal opened</p>");
i++;
}
});
</script>
This problem has been solved in bootstrap version 3.3.5. so just use Bootstrap CSS and JS for version 3.5 and above. It will work well.
It's a known open bug in Bootstrap's Modal widget: https://github.com/twbs/bootstrap/issues/15136
I am trying to accomplish a cool modal that slides down onto the page. I ran into a problem and do not know what it could be, but when I click the button the modal isn't being loaded at all even though the #CmapModal shows up in the url. Any idea as to why the modal is not displaying when I click it?
Code for modal:
<p><a data-toggle="modal" href="#CmapModal" class="btn btn-default"><b>View Map »</b></a></p>
</div>
<!-- Modal -->
<div class="modal fade" id="CmapModal" tabindex="-1" role="dialog" aria-labelledby="CmapModalLabel" 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">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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Not sure why you want to do this with only CSS and HTML.
Here is a working solution for you: http://jsfiddle.net/H4SDk/
I have added a short javascript code:
$( "#clickme" ).click(function() {
$( "#book" ).toggle("slow");
});
You can change the ID names yourself.
If I understood correct you just wanted the modal to show, right?
You have missed the class "hide" in your model div. Try this;
<div class="modal hide fade" id="CmapModal" tabindex="-1" role="dialog" aria-labelledby="CmapModalLabel" aria-hidden="true">
JSFiddle Example
I have this link
<a href='' data-toggle='modal' data-target='#modalC'>Book Now</a>
And i have this code which opens a bootstrap modal popup.
<div class="modal fade" id="modalC" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Cantidad reservas mensuales</h4>
</div>
<div class="modal-body" id="content">
</div>
</div>
</div>
</div>
Everything appearing inside div with id content is what appears inside modal popup, so my question is is there a way to show my already created aspx webform inside the modal popup without having to copy all the html and codebehind to this div?
I've heard something about window.open but i think it is not the case, Thank you in advance.
You can add an iframe into the modal body and load the url of your page inside it.
<div class="modal fade" id="modalC" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Cantidad reservas mensuales</h4>
</div>
<div class="modal-body" id="content">
<iframe src="your new page url">
</div>
</div>
</div>
</div>
if you want to load the page everytime you open the modal, you can add the iframe src when you click on the button you use to open the modal (or whichever method you use to open it).
Maybe this code can help you:
Add jquery and bootstrap
$(document).ready(function () {
initializeEvents();
});
var initializeEvents = function () {
$("#btnCarga").click(function () {
//agregas el aspx que quieres mostrar, el titulo y el pie de página pueden ser opcionales
ShowModalIframe('OtherPage.aspx', 'Tittle', 'Footer');
});
};
//Crea un modal con un iframe en el contenido donde se mostrará el aspx
var ShowModalIframe = function (uriContent, tittle = 'Titulo', footer='Carga completada') {
var html = '<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">\
<div class="modal-dialog modal-xl">\
<div class="modal-content">\
<div class="modal-header">\
<h5 class="modal-title">'+tittle+'</h5>\
<button type="button" class="close" data-dismiss="modal" aria-label="Close">\
<span aria-hidden="true">×</span>\
</button>\
</div>\
<div id="modal-body" class="modal-body">\
<div class="embed-responsive embed-responsive-21by9">\
<iframe id="iframe-modal" class="embed-responsive-item" src="'+document.location.origin+'/'+uriContent+'"></iframe>\
</div>\
</div>\
<div class="modal-footer">\
'+footer+'\
</div>\
</div>\
</div>\
</div>';
var dialog = $(html);
dialog.modal({
backdrop: 'static',
keyboard: false
});
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<button id="btnCarga" type="button" class="btn btn-primary" >
Mostrar modal
</button>