定位在jquery框？

這裏第一個問題，所以我希望我做對了。定位在jquery框？

所以，我的腳本放在了我的網頁上。

我想出瞭如何定位我的模態，然後裏面有一個白色的盒子，再加上一個視頻窗口。我設法將視頻窗口定位在白色的中間，所以它看起來像一個邊框，正好按照我想要的居中，但是我不能將這個白色的視頻放在背面較大的一箇中（模態？）

有人可以幫助我嗎？因爲我根本不知道jquery，我只想要這種模式效果。

非常感謝。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> 
<script type="text/javascript"> 

$(document).ready(function() { 

    $('a[name=modal]').click(function(e) { 
     e.preventDefault(); 

     var id = $(this).attr('href'); 

     var maskHeight = $(document).height(); 
     var maskWidth = $(window).width(); 



       position:fixed; 
       top:10px; left:10px; 

     $('#mask').css({'width':1000,'height':600}); 

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

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

     $(id).css('top', winH/2-$(id).height()/2); 
     $(id).css('left', winW/2-$(id).width()/2); 

     $(id).fadeIn(2000); 

    }); 

    $('.window .close').click(function (e) { 
     e.preventDefault(); 

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

    $('#mask').click(function() { 
     $(this).hide(); 
     $('.window').hide(); 
    });   

}); 

</script> 
<style type="text/css"> 
body { 
font-family:verdana; 
font-size:15px; 
} 

a {color:#333; text-decoration:none} 
a:hover {color:#ccc; text-decoration:none} 

#mask { 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:9000; 
    background-color:#000; 
    display:none; 
} 

#boxes .window { 
    position:fixed; ***<--.... PS: i tried to use the absolute here, wouldnt work.>>>*** 
    left:1000; 
    bottom:-100px; 
    width:440px; 
    height:200px; 
    display:none; 
    z-index:9999; 
    padding:20px; 
} 

#boxes #dialog { 
    width:820px; 
    height:520px; 
    padding:10px; 
    background-color:#ffffff; 
} 


.close{display:block; text-align:right;} 

</style> 
</head> 
<body> 

<ul> 
<table border="0"> 
<tr> 
<th><a href="#dialog" name="modal"><img height="180" width="300" src="http://www.youtube.com"></a>youtube</th> 
<th><a href="#dialog" name="modal"><img height="180" width="300" src="http://www.youtube.com"></a>youtube</th> 
<tr> 
<td><a href="#dialog" name="modal"><img height="180" width="300" src="http://www.youtube.com"></a></td> 
<td><a href="#dialog" name="modal"><img height="180" width="300" src="http://www.youtube.com"></a></td> 
</tr> 

</table> 


</ul> 

<div style="font-size:10px;color:#ccc" ></div> 


<div id="boxes"> 

<div id="dialog" class="window" > 
<a href="#" class="close"> Close [X]</a><br /> 
<iframe id="youtube" width="820" height="517" src="http://www.youtube.com/v/VOayJ-QxfL4&hl" frameborder= "0" allowfullscreen style="position:absolute;top:10px;bottom10px;"></iframe> 


</div>

來源

2013-08-18 user2693367

好了，沒有嘗試任何一個時間，

我發現這個代碼後：

document.getElementById('iframe').src = 'putherethesourceofyourvideo'

只是爲我工作的事！

來源

2013-09-27 00:28:33 Eduardo

定位在jquery框？

回答

相關問題