我的div包含2个Div,一个用于图像缩略图,另一个包含链接。但是,每当我点击“link-div”上的链接时,它总会显示我不期望它的模态窗口。它应该正常打开链接,而不是模态对话框。 仅供参考,通过右键单击正常打开链接。以下是代码:
<div class="col-sm-4">
<div id="<?php echo $row['filename']?>" class="thumbnail" style="height:205px;width:337px;background-image:url('<?php echo base_url().'/uploads/thumb/'.$row['thumbnail']; ?>')">
<div onClick="loadModal();" style="position: absolute;bottom:40%;left:40%;">
<img src="<?php echo base_url(); ?>/uploads/thumb/play-button.png" />
</div>
<div style="z-index:1; position:relative;" class="thumb_text">
<h5 > Kiriman : <a href="<?php echo base_url();?>cms/detail/<?php echo $row['iduser'];?>"><u><?php echo $row['nama'];?></u></a></h5>
</div>
</div>
</div>
模态代码:
function loadModal()
{
$("div.modal-bg").show();
$("div.modal-bg").fadeTo("slow", .5);
$("div#simpleModal").addClass("show");
}
模态的CSS:
div#simpleModal.show
{
opacity: 1;
z-index: 100;
-webkit-transition-duration: 0.25s;
}
我在第二个Div中包含style="z-index:1"
包含链接,但仍然失败。
答案 0 :(得分:0)
因为您从父loadModal()
div
函数
所以改变你的功能
<div class="col-sm-4">
<div class="thumbnail" style="height:205px;width:337px;background-image:url('<?php echo base_url().'/uploads/thumb/'.$row['thumbnail']; ?>')">
<div onClick="loadModal();" id="<?php echo $row['filename']?>" style="position: absolute;bottom:40%;left:40%;">
<img src="<?php echo base_url(); ?>/uploads/thumb/play-button.png" />
</div>
<div style="z-index:1" class="thumb_text">
<h5 > Author : <a href="<?php echo base_url();?>cms/detail/<?php echo $row['iduser'];?>"><u><?php echo $row['name'];?></u></a></h5>
</div>
</div>
答案 1 :(得分:0)
请尝试使用此代码<div style="z-index:1; position:relative;" class="thumb_text">
因为z-index不能使用静态位置(默认位置:静态)