当我单击页面底部的链接时,有人可以帮助我如何显示div吗?
如上图所示,页面底部有链接。虽然当我单击底部的链接时,div(视频div)显示在页面顶部。但是我希望div应该显示在我单击div的位置。
以下是我的html部分:
<body>
<div id="ActualContentBox">
<h2 align="center"> Selenium WebDriver Videos</h2>
<h4 align="center"><i>Click on any link below to watch the Video</i></h4><br/>
<ul>
<h3>
<li>How to Install Eclipse and configure Selenium WebDriver</li>
</h3>
<ul>
<li><a href="#" id="playvideo" onclick="playMe('G2KlPOYu6U8')">How to Install Eclipse and configure Selenium WebDriver</a></li>
</ul>
</ul>
</div>
<div id="videoDiv" style="display:none;">
<div id="titleHeaderDiv">
<a href="#" ><img id="closeDiv" src="images/close-1.png" alt="Click to close" onclick="closeDivFunc()"></a>
</div>
<iframe id="video1" allowfullscreen="" webkitallowfullscreen=""></iframe>
</div>
</body>
以下是我的CSS:
div#ActualContentBox
{
border: 5px groove #BEB5B2;
margin: 0 auto;
width:80%;
height:auto;
}
div#overlayDiv
{
position: fixed;
overflow: auto;
background:red;
background-image: url("../images/transparent.jpg");
height: 500px;
width: 80%;
left: 135px;
top: 175px;
margin: 0 auto;
}
div#videoDiv
{
position:absolute;
left: 400px;
top: 300px;
border: 5px groove #BEB5B2;
height:360px;
overflow: auto;
}
div#titleHeaderDiv
{
position: absolute;
top:0px;
background-color:#F1F1F1;
height:50px;
width:500px;
}
img#closeDiv
{
width:100%;
position: absolute;
overflow: auto;
height: 30px;
width: 30px;
right: 10px;
top: 10px;
}
iframe#video1
{
position: relative;
/*bottom: 0;
right: 0;
border: 3px solid #73AD21;*/
top:50px;
width:500px;
height:300px;
}
最佳答案
您要在每个列表项中创建一个视频div,并默认将其隐藏。当您单击链接时,然后显示视频。
如果只需要一个视频实例,则可以获取光标的pageX和pageY并在该位置显示视频。
的HTML
<li class="video-container">
<a href=""></a>
<div class="video"></div>
</li>
的CSS
.video-container {
position: relative;
}
.video {
position: absolute;
bottom: 0; right: 0;
display: hidden;
}
JS
$('.video-container > a').click(function(e) {
$(this).next().css('display', 'block');
});
这应该使您入门。