javascript - 单击导航栏链接时的 jQUery 对话框不起作用

Question

我正在尝试通过单击导航栏中的列表元素来设置 jQuery 对话框。单击 Canvas 元素时，我有用于单独元素的代码，但它不适用于此应用程序。我的代码如下:

导航栏列表中的可点击 Div:

<nav id="nav_bar">
    <ul>
        <li><a class="fancypdf" href="img/resume.pdf">Resume</a></li>
        <li><a>Youtube</a></li>
        <li class="contact" style="cursor:pointer;">Contact</li>
    </ul>
</nav>

应该在对话框中显示的 Div:

<div class='dialog'>
    Hello
</div>

jQuery:

<script>
$(function(){
    $(".contact").click(function(event){
        $(".dialog").dialog({
            width:490,
            height:500,
            draggable:false,
            blur:true,
            show:{
                effect:"blind",
                duration:100
                },
    hide: {
    effect: 'blind',
    duration: 100
    }
        });
});
});
</script>

我的“进口”: http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js">    </script>

<script type="text/javascript" src="js/libs/fancybox-2.1.4/jquery.fancybox.pack.js">    </script>
    <link rel="stylesheet" href="css/fancybox/jquery.fancybox-buttons.css">
    <link rel="stylesheet" href="css/fancybox/jquery.fancybox-thumbs.css">
    <link rel="stylesheet" href="css/fancybox/jquery.fancybox.css">

这是我所有的主要脚本标签:

<script>
$(".fancypdf").click(function(){
$.fancybox({
type: 'html',
autoSize: false,
content: '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=80,0,0"    type="application/pdf" height="99%" width="100%" />',
beforeClose: function() {
$(".fancybox-inner").unwrap();
}
}); //fancybox
return false;
}); //click
</script>


<!-- Grab Google CDN's jQuery, fall back to local if offline -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">  </script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-  1.7.1.min.js"><\/script>');</script>


<!-- FancyBox -->
<script src="js/fancybox/jquery.fancybox.js"></script>
<script src="js/fancybox/jquery.fancybox-buttons.js"></script>
<script src="js/fancybox/jquery.fancybox-thumbs.js"></script>
<script src="js/fancybox/jquery.easing-1.3.pack.js"></script>
<script src="js/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox({
beforeShow : function(){
this.title =  this.title + " - " + $(this.element).data("caption");
}
});
}); // ready
</script>



<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth    : 800,
maxHeight   : 600,
fitToView   : false,
width   : '70%',
height  : '70%',
autoSize    : false,
closeClick  : false,
openEffect  : 'elastic',
closeEffect : 'none',
beforeShow : function(){
this.title =  $(this.element).data("caption");
}
});
});
</script>

<script>
var jquery = jQuery.noConflict();
jquery(function(){
jquery(".contact").click(function(event){
console.log("clicked");
jquery(".dialog").dialog({
width:490,
height:500,
draggable:false,
blur:true,
show:{
effect:"blind",
duration:100
},
hide: {
effect: 'blind',
duration: 100
}
    });
});
});
</script>

Answer 1

看起来您忘记包含 jQuery UI 或 jQuery 和 jQuery UI 加载的顺序错误。

您的代码运行良好。

Tested in jsBin

只需确保正确包含所有 js:

<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>