使用CSS縮放彈出框，Jquery

Question

我在我的網站主頁上創建彈出框。我從堆棧中的其他線程引用此代碼，它按照我的要求工作。

下面的代碼會給我正確的彈出框。但我需要使彈出框成爲頁面的四分之一，這是可能的嗎？

<div id="boxes"> 
<div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window"> 
    <img src="images/coupon2011.jpg" width="507" height="300" /> 
<a href="#" class="close"><img src="images/closelabel.gif" width="66" height="22" /></a> 
</div> 
<!-- Mask to cover the whole screen --> 
<div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div> 
</div> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
// Check if cookie exists 
if (Cookies.get('popunder')) { 
    return; 
} 

var id = '#dialog'; 

//Get the screen height and width 
var maskHeight = $(document).height(); 
var maskWidth = $(window).width(); 

//Set heigth and width to mask to fill up the whole screen 
$('#mask').css({'width':maskWidth,'height':maskHeight}); 

//transition effect  
$('#mask').fadeIn(1000);  
$('#mask').fadeTo("slow",0.8); 

//Get the window height and width 
var winH = $(window).height(); 
var winW = $(window).width(); 

//Set the popup window to center 
$(id).css('top', winH/2-$(id).height()/2); 
$(id).css('left', winW/2-$(id).width()/2); 

//transition effect 
$(id).fadeIn(2000);  

// Set cookie to be sure the popover activated again 
Cookies.set('popunder', '1'); 

//if close button is clicked 
$('.window .close').click(function (e) { 
    //Cancel the link behavior 
    e.preventDefault(); 

    $('#mask').hide(); 
    $('.window').hide(); 
});  

//if mask is clicked 
$('#mask').click(function() { 
    $(this).hide(); 
    $('.window').hide(); 
});  

}); 

</script> 

在此先感謝....

Answer 1

你可以試試這個？

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
// Check if cookie exists 
if (Cookies.get('popunder')) { 
    return; 
} 

var id = '#dialog'; 

//Get the screen height and width 
var maskHeight = $(document).height()/2; 
var maskWidth = $(window).width()/2; 

//Set heigth and width to mask to fill up the whole screen 
$('#mask').css({'width':maskWidth,'height':maskHeight}); 

//transition effect  
$('#mask').fadeIn(1000);  
$('#mask').fadeTo("slow",0.8); 

//Get the window height and width 
var winH = $(window).height(); 
var winW = $(window).width(); 

//Set the popup window to center 
$(id).css('top', winH/2-$(id).height()/2); 
$(id).css('left', winW/2-$(id).width()/2); 

//transition effect 
$(id).fadeIn(2000);  

// Set cookie to be sure the popover activated again 
Cookies.set('popunder', '1'); 

//if close button is clicked 
$('.window .close').click(function (e) { 
    //Cancel the link behavior 
    e.preventDefault(); 

    $('#mask').hide(); 
    $('.window').hide(); 
});  

//if mask is clicked 
$('#mask').click(function() { 
    $(this).hide(); 
    $('.window').hide(); 
});  

}); 

</script> 

Answer 2

要設置一些爲視，這是相當多頁面的1/4，你需要的屬性width: 25vw設置上彈出，然後用當然，有一些技術可以使模態居中。如果那是你的意思。