使用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设置上弹出，然后用当然，有一些技术可以使模态居中。如果那是你的意思。