dialog box

[false]

Kā šim logam dabūt, lai kad viņu izsauc, logs nostātos lapas centrā un kad lapu ritina uz augšu/leju logs tā arī stāv centrā? Līdzīgi fancybox.

Tagad logs kad viņu izsauc stājas, ta teikt centrā, bet kad lapa ir gara, tad tas 'centrs' ir apakšā.

 

css

#dialog-overlay {
width:100%;
height:100%;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
background:#000;
position:absolute;
top:0; left:0;
z-index:3000;
display:none;
}
#dialog-box {
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-moz-border-radius: 5px;
   -webkit-border-radius: 5px;
vertical-align: top;
padding: 0;
margin: 0;
background:#eee;
width:328px;
position: absolute;
z-index:5000;
display:none;

}
#dialog-box .dialog-content {
text-align:left;
padding:10px;
margin:13px;
color:#666;
font-family:arial;
font-size:11px;
}

#dialog-box .dialog-content p {
font-weight:700; margin:0;
}
#dialog-box .dialog-content ul {
margin:10px 0 10px 20px;
padding:0;
height:50px;
}

 

js

$(document).ready(function () {
$('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {
$('#dialog-overlay, #dialog-box').hide();
return false;
});
$(window).resize(function () {
if (!$('#dialog-box').is(':hidden')) popup();
});
});
function popup(message) {
var maskHeight = $(document).height();  
var maskWidth = $(window).width();
var dialogTop =  (maskHeight/2) - ($('#dialog-box').height());  
var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2);
$('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
$('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();
$('#dialog-message').html(message);
}

 

html

<div id="dialog-overlay"></div>
<div id="dialog-box">
<div class="dialog-content">
<div id="dialog-message"></div>
</div>
</div>

[false]

position: fixed; //#dialog-overlay

tas tā kā būtu loģiskākais risinājums..

neder

[false]

 

Tas fancybox, kad lapu ritina uz augšu/leju paliek savā vietā. Man tapat vajag ar to otru logu.

Tas otrais logs atvēras un paliek lapas apaksā.

[draugz]

Nu nice1 jau ieteica pareizo risinājumu, tikai kļūdījās

nevis #dialog-overlay bet #dialog-box

 

#dialog-box{
position:fixed;
}

Edited February 3, 2012 by draugz

[false]

Tagad tikai overlay parādas un viss..

Edited February 3, 2012 by false

[draugz]

paskaties, vai šitas

$('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();

tev ieliek pareizās vērtības. Paskaties firebug`ā vai top un left nav lielāki par tava ekrāna izmēriem. moš tur vispār nav vērtības...