I have used SimpleModal. Now the problem is the resizing of the modal dialog.
I have a confirm dialog, and it is basically small after pressing Yes.
The second one is my.php
and it contains large data. I am using the concept of
appending an already existing model. How do I resize the content?
And my JavaScript snippet has:
$(document).ready(function () {
$('#confirmbutton, #confirmDialog a.confirm').click(function (e) {
e.preventDefault();
confirm("Continue to the SimpleModal project page?", function () {
window.location.href = 'http://localdata/';
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
close:false,
position: ["20%",],
overlayId:'confirmModalOverlay',
containerId:'confirmModalContainer',
onShow: function (dialog) {
dialog.data.find('.message').append(message);
// If the user clicks "yes"
dialog.data.find('.yes').click(function () {
// Call the callback
// $.modal.close();
$.get("my.php", function (data) {
/* Sample response:
* <div id="title">My title</div>
* <div id="message">My message</div>
*
*/
var resp = $("<div/>").append(data);
var title = resp.find("#title").html(),
message = resp.find("#message").html();
dialog.data.find(".header span").html(title);
dialog.data.find(".message").html(message);
dialog.data.find(".buttons .yes").hide();
dialog.data.find(".buttons .no").hide();
//dialog.data.find(".buttons .no").html("Close");
// No need to call the callback or $.modal.close()
});// End for click
});//End for on show
} //End for modal
}); //Close for modal
}
My CSS:
confirmModalContainer {height:700px; width:700px; font-family:'Trebuchet MS', Verdana, Arial; font-size:16px; text-align:left; background:#fff; border:2px solid #336699;}
How do I modify the SimpleModal container size? On an Ajax call?
Best Answer
Just do this....