jQuery UI对话框未出现Squarespace adblock检测

Question

I have created an AdBlock detector, and my jQuery dialog does not seem to be working. Note: the "adblock" variable is already referenced. Also, I am using Squarespace, which is why I had to add the code to the body.

if(adblock) { 
    $("body").html('<div id="alert-dialog" title="Turn off AdBlock"> Please turn your AdBlocker off. It hurts our business. To turn off AdBlock, just disable it on this page. Thank you.<br><br><br> Sincerely, The <i>Wildwood Howl</i></div>'+$("body").html()); 
    $(function() { 
        $( "#alert-dialog" ).dialog(); 
    }); 
} 

Here is the error:

TypeError: $("#alert-dialog").dialog is not a function

AKA the dialog function is undefined. I don't know why. Here are my added links and scripts .

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>

Click here to see my page. Also, there are supposed to be background images, but they are not showing up.

I can provide a jsfiddle for this. Thanks. Help is appreciated.

Answer 1

The problem is probably because you're adding jQuery twice.

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
---------------^ remove this

jQuery UI extends the $ created by jquery-1.10.2 , but then you add jquery-latest.min.js which probably overwrites the $ created earlier which has the jQuery UI functions.

also make sure you're code runs after these two scripts are evaluated and DOM is ready