Javascript 带有AJAX加载内容的fancyBox无法工作
我正试图让(FB从现在起)工作,但无法得到它。我将在下面解释我的工作。首先,当然包括以下FB脚本和样式:Javascript 带有AJAX加载内容的fancyBox无法工作,javascript,jquery,fancybox,fancybox-2,Javascript,Jquery,Fancybox,Fancybox 2,我正试图让(FB从现在起)工作,但无法得到它。我将在下面解释我的工作。首先,当然包括以下FB脚本和样式: <!-- fancyBox styles --> <link href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet"> <link href="//cdnjs.cloudflare.com/ajax/libs/fancybox/
<!-- fancyBox styles -->
<link href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-buttons.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css" rel="stylesheet">
<!-- fancyBox JS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-buttons.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-media.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js"></script>
<script src="/app_dev.php/js/bmain_registro_2.js" type="text/javascript"></script>
Routing.generate('datos-basicos')
来自Symfony2和FOSJsRoutingBundle,但它工作正常,因为我得到了想要在模型上显示的内容。问题是什么
- 模态内容不是隐藏的(见下图),我认为默认情况下应该是隐藏的
- 当我点击
链接时,执行Register
代码,但模式从未显示console.log()
这里我缺少的是什么,我的代码是否正确?您只需将“fancybox”类添加到链接中,如下所示:
问候
<a href="#" class="getregistered">Register</a>
<div id="register"></div>
var $register = $("#register");
if ($register.length) {
$register.load(Routing.generate('datos-basicos'));
}
$("#tabs").tabs();
$('.getregistered').on("click", function() {
console.log("click");
$("#register").fancybox({
openEffect: 'elastic',
closeEffect: 'elastic',
autoSize: false,
closeClick: false
});
});