我正在使用颜色框。
用户需要点击两次来打开颜色框并在打开的 iframe 中运行音频播放器 ...
<td data-label="Play Now">
<div data-id="<?php echo $data['lecture_id'];?>"> // It is for another ajax to update database. working ok.
<a href="javascript:void(0);" data-url="recordings-play.php?play-audio=<?php echo $data['lecture_id'];?>" target="_top" class="btn btn-success colorbox1">Play</a>
</div>
<script>
$(document).on("click", ".colorbox1", function(){
$('.colorbox1').colorbox({
href: $(this).data('url'),
iframe: true,
innerWidth: '95%',
innerHeight:'70%',
opacity : 0,
fixed:true,
escKey: false,
overlayClose: false,
onOpen: function() {
$('#cboxOverlay,#colorbox').css('visibility', 'hidden');
$('#cboxOverlay').css({
'visibility': 'visible',
'opacity': 0.9,
'cursor': 'pointer'
}).animate({
height: ['toggle', 'swing'],
opacity: 'toggle'
}, 100 , function() {
$('#colorbox').css({
'visibility': 'visible'
}).fadeIn(300);
});
}
});
});
</script>
</td>
可能是我在第一次点击时创建颜色框并在第二次点击时打开它。但不知道如何解决。
感谢您的帮助...
答案 0 :(得分:1)
就像@skobaljic 所说的,删除多余的 click
处理程序。
然后关于音频加载,我认为问题是由于您传递的 $(this)
选项中的 href
。选项包含在一个对象中...当插件真正执行 $(this).data('url')
时,this
不再是 .colorbox1
。
所以这应该有效:
<td data-label="Play Now">
<div data-id="<?php echo $data['lecture_id'];?>"> // It is for another ajax to update database. working ok.
<a href="javascript:void(0);" data-url="recordings-play.php?play-audio=<?php echo $data['lecture_id'];?>" target="_top" class="btn btn-success colorbox1">Play</a>
</div>
<script>
$('.colorbox1').colorbox({
href: $('.colorbox1').data('url'), // <-- use the right selector instead of this
iframe: true,
innerWidth: '95%',
innerHeight:'70%',
opacity : 0,
fixed:true,
escKey: false,
overlayClose: false,
onOpen: function() {
$('#cboxOverlay,#colorbox').css('visibility', 'hidden');
$('#cboxOverlay').css({
'visibility': 'visible',
'opacity': 0.9,
'cursor': 'pointer'
}).animate({
height: ['toggle', 'swing'],
opacity: 'toggle'
}, 100 , function() {
$('#colorbox').css({
'visibility': 'visible'
}).fadeIn(300);
});
}
});
</script>
</td>