0

这里的第一个问题，所以我希望我做对了。

所以，我把脚本放在我的网站上。

我想出了如何定位我的模态框，然后里面有一个白框，还有一个视频窗口。我设法将视频窗口定位在白色窗口的中间，所以它看起来像一个边界，完全按照我想要的方式居中，但我无法看到这个白色窗口居中，后面的视频更大（模态？）

有人可以帮我吗？因为我根本不知道 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>
4

1 回答 1

0

好吧，经过一段时间没有尝试任何东西，

我找到了这段代码：

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

是唯一对我有用的东西！

于 2013-09-27T00:28:33.060 回答