semplice ridimensionamento modale e centratura? - jquery, simplemodal

Sto usando simplemodal per far apparire un modal con del contenuto in esso.

All'interno di quel contenuto sto facendo una chiamata ajax ad un altro contenuto che è una dimensione diversa dal contenuto originale (un po 'più piccola)

quello che sto facendo è un po 'come lavorare usando jQuery per cambiare la dimensione del contenitore modale.

nella sezione incompleta della mia chiamata ajax uso il seguente jQuery

jQuery("#simplemodal-container").animate({ height: 550 }, 500);
jQuery("#simplemodal-container").animate({ width: 493}, 500);"

ci sono due problemi con questo.

in diversi browser la larghezza è leggermente diversa, quindi il contenuto modale non sembra corretto

e il modale mantiene la sua posizione originale, ma non si è più aggiornato nella finestra del browser.

qualcuno sa come ridimensionare simplemodal in base a nuovi contenuti all'interno di una modale aperta?

grazie mille.

risposte:

3 per risposta № 1

My SimpleModal Auto Larghezza / Altezza e codice modale centrato:

$("#sampleDiv").modal({
onShow: function (dialog) {
var h = $(window).height();
var w = $(window).width();
dialog.container.css("height", "auto");
dialog.container.css("width", "auto");
var h2 = dialog.container.height();
var w2 = dialog.container.width();
var top = (h/2)-(h2/2)-h2;
var left = (w/2)-(w2/2)-w2;
dialog.container.css("left", left+"px");
dialog.container.css("top", top+"px");
}
});

Funziona con IE, FireFox e Chrome.

---

0 per risposta № 2

Un esempio come il seguente dovrebbe funzionare per te:

$("#modalContentTest").modal({onShow: function (dialog) {
var sm = this;
dialog.container.animate({height: 550, width: 493}, 500, function () {
sm.setPosition();
});
}});

---

0 per risposta № 3

Ecco cosa ho finora

funzione modalThree ($ tipo) { var $ tipo;

    jQuery("#simplemodal-container").animate({ width: 250 }, 0);
jQuery("#simplemodal-container").animate({"left": "+=200px"}, "fast");
jQuery("#simplemodal-container").animate({"top": "-=50px"}, "fast");


jQuery("#simplemodal-container").css({
position:"absolute",
left: (jQuery(window).width() - jQuery("#simplemodal-container").outerWidth())/2,
top: (jQuery(window).height() - jQuery("#simplemodal-container").outerHeight())/2
});


jQuery("#dialog").load("/default/modalTwo", function()
{
jQuery("#dialog").modal({
overlay:80,
autoResize:true,
overlayCss: {backgroundColor:"#000"}
});
});
}

il mio sito ha una larghezza fissa e conosco la dimensione del contenuto della chiamata ajax.

lo ridimensiono usando il seguente

jQuery ("# ​​simplemodal-container"). animate ({width: 250}, 0); jQuery ("# ​​simplemodal-container"). animate ({"left": "+ = 200px"}, "fast"); jQuery ("# ​​simplemodal-container"). animate ({"top": "- = 50px"}, "fast");

è un po 'come funziona, ma mi piacerebbe calcolare quanto a sinistra e in alto deve andare in base alla dimensione della finestra.

Funziona ma non sono sicuro che sia la soluzione.

---