I'm using the simplemodal popup in jquery, and I would like to set the height of my popup dynamically depending on my content. Currently, it is fixed at 500. If I remove the height property, then it works the first time, but if the content grows, then the height doesn't adjust itself (I have tabs within my popup and each tab loads different content).
$("#popup").modal({
containerCss: {
width: 550,
height: 500
},
I can have dynamic height (only tested on chrome and ff) by adding this function to last line of onShow:
$('#simplemodal-container').css('height', 'auto');
hope this could help. If you specify a containerId, you should replace the '#simplemodal-container' with your containerId.
The difficulty with some of the solutions here, i.e. setting height auto, is that you lose simplemodal's nice behaviour to keep the modal smaller than the current window size (by setting maxHeight to 90%, for example).
I have come up with the following solution:
$.modal.defaults.onShow = function(dialog) {
if (!dialog) dialog = $.modal.impl.d
dialog.container.css('height', 'auto');
dialog.origHeight = 0;
$.modal.setContainerDimensions();
$.modal.setPosition();
}
The essence of this is that once you run setContainerDimensions on an active modal it will not recalculate them if you pull in new content, even with an explicit call to setContainerDimensions. What I do here is get round the remembered height and force the recalculate.
You will of course have to call $.modal.defaults.onShow each time you change the content (ajax call, tab change etc) but you can keep the autoResize and autoPosition capabilities whilst avoiding unnecessary scrollbars.
I combined Sahat's and Tommy's answer to get this shorter version. I tested it in Firefox and it works:
$.modal("<p>yourContent</p>", { onShow: function(dlg) {
$(dlg.container).css('height','auto')
}});
Put this in your css file:
.simplemodal-container
{
height:auto !important;
}
$("#DialogContainer" ).dialog({ title: thisTitle, modal: true, show: 'fade', buttons: { 'Done': function() { $( this ).dialog( "close" ); } } –
Melindamelinde SimpleModal does not have a built in feature that adjusts height/width when the content changes. This is something you'd have to add.
here is my solution:
var activeModal;
$.extend($.modal.defaults, {
onShow: function(dialog) {
activeModal = dialog;
dialog.container.css('height', 'auto');
}
});
function showModal() { // Creates a modal
$.modal("#aModal");
}
...
function changeModalContent() { // A function that changes the modal content
...
// After changing the content, do this:
$.modal.update(activeModal.data.css('height'), 'auto');
}
I tested it on FF, Chrome, Safari and Opera.
Hope it works for you too...
Regards!
Leaving the height out defaults it to auto height. If you destroy the dialog and then immediately recreate it the auto height should essentially resize it for you. It a hack work around but probably easier than trying to calculate the appropriate height manually. It would be nicer to have an autoresize option in dialog but...
I was able to accomplish this by memoizing the dialog parameter that is passed in to the onShow event handler, then when some later event causes content to change, manipulate the dialog.container's css height property:
<script type="text/javascript">
var walkInDlg;
function doModal() { // called from onClick of some button on the page
jQuery.modal("#aModal", { height:"auto",
width:500,
backgroundColor:"#807c68",
overlay:75,
onShow: function(dlg) { walkInDlg = dlg },
onClose: function(dlg) { walkInDlg = undefined; jQuery.modal.close() },
containerCss:{border:"0",padding:"0"}
})
}
</script>
...
// somewhere else in the page
// this is in the event handler for an action that
// adds content to the dialog
...
// after adding the content, do this:
jQuery(walkInDlg.container).css('height', 'auto')
witnessed this technique working in Chrome and Firefox.
var h = $(your_content_element).css('height');
$("#popup").modal({
containerCss: {
width: 550,
height: h
},
Then you have to find a way that when you trigger the modal, the script calculate the height again.
Here is what I do:
$.extend($.modal.defaults, {
closeClass: "close",
closeHTML: "<a></a>",
minWidth: 400,
minHeight: 200,
maxWidth: 780,
maxHeight: 580,
onShow: function (dialog) {
dialog.container.css("height", "auto");
}
});
Building off of dmnc's answer, I was able to get this working by adding the code to the onOpen function, in the callback for the container fadeIn.
There's a bit of a position jump as content renders, but it resizes and recenters perfectly for me now.
$('#target').modal({
overlayClose: true,
onOpen: function (dialog) {
dialog.overlay.fadeIn('fast', function(){
dialog.data.hide();
dialog.container.fadeIn('fast', function(){
dialog.data.fadeIn('fast');
// where the magic happens
dialog.container.css('height', 'auto');
dialog.origHeight = 0;
$.modal.setContainerDimensions();
$.modal.setPosition();
});
});
},
onClose: function (dialog) { ... }
});
Here is a simple way to dynamically adjust the height and/or width of Eric Martins Simple Modal. I am just calling to open a modal after the '.something' is clicked. I measure the window height/width and subtract(px or div(height)). I then set the width/height with the dynamically created variable(s)
$('.something ').click(function() {
//Dynamically Get Height/Width of the Window
var wh = $(window).height() - 100
var ww = $(window).width() - 100
//Can subtract other divs heights if wanted
//var dh = $('#exampleDiv').height();
//dh = ( wh - dh );
$('#modalThis').modal({
containerCss : {
height : wh,
//or height : dh
width : ww
},
});
});
.modal({
autoResize:true,
maxHeight: $(window).height(),
minHeight: $(window).height() - 100
});
in jquery.simplemodal.js, overwrite the
containerCss:{}
by this one:
containerCss:{width: 650}
change the css images the top and bottom gif file.
by Arman de Guzman de Castro :-)
© 2022 - 2024 — McMap. All rights reserved.