CSS、Jqueryを使用した拡大縮小ポップアップボックス

Question

私のホームページのホームページにポップアップボックスを作成しています。私はスタックからの他のスレッドの1つからこのコードをレッスンしました。

以下のコードを入力すると、正しいポップアップボックスが表示されます。しかし、私はポップアップボックスをページの1/4にする必要があります、それは可能ですか？事前に

<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を設定し、使用する必要がありますもちろん、モーダルを中心にするいくつかのテクニック。それがあなたが意味するものなら。