Есть код, к которому надо подкл js файл, но файл не хочет выполняться, а когда скрипт в html, то выполняеться Сам скрипт <script type="text/javascript"> $(document).ready(function(){ $(".mymagicoverbox").click(function() { $('#myfond_gris').fadeIn(300); var iddiv = $(this).attr("iddiv"); $('#'+iddiv).fadeIn(300); $('#myfond_gris').attr('opendiv',iddiv); return false; }); $('#myfond_gris, .mymagicoverbox_fermer').click(function() { var iddiv = $("#myfond_gris").attr('opendiv'); $('#myfond_gris').fadeOut(300); $('#'+iddiv).fadeOut(300); }); }); </script> Так не работает <html> <meta charset="UTF-8" /> <head> <title>Всплывающие модальные окна (popup) с помощью CSS и JS</title> <style type="text/css"> .fond { position:absolute; padding-top:45px; top:0; left:0; right:0; bottom:0; background-color:#f8b334; } .mymagicoverbox { display:inline-block; color:#ffffff; padding:10px; margin:10px; cursor:pointer; font-weight:300; font-family:'Roboto'; } .mymagicoverbox_fenetre { z-index:9999; position:fixed; margin-left:50%; top:100px; text-align:center; display:none; padding:5px; background-color:#ffffff; color:#97BF0D; font-style:normal; font-size:20px; font-weight:300; font-family:'Roboto'; } .mymagicoverbox_fenetreinterieur { text-align:center; overflow:auto; padding:10px; background-color:#ffffff; color:#666666; font-weight:400; font-family:'Roboto'; font-size:17px; border-top:1px solid #e7e7e7; margin-top:10px } .mymagicoverbox_fermer { color:#CB2025; cursor:pointer; font-weight:400; font-size:14px; font-style:normal font-family:'Roboto'; } #myfond_gris { display: none; background-color:#000000; opacity:0.7; width:100%; height:100%; z-index:9998; position:fixed; top:0; bottom:0; right:0; left:0; } </style> </head> <body> <div align="center" class="fond"> <div id="myfond_gris" opendiv=""></div> <div align="center" style="padding-top:35px;"> <div style="background-color:#00a096;" iddiv="box_1" class="mymagicoverbox"> Нажми на меня ! </div> <div style="background-color:#cb2025;" iddiv="box_2" class="mymagicoverbox"> И на меня тоже... </div> </div> <div id="box_1" class="mymagicoverbox_fenetre" style="left:-225px; width:450px;"> Заглавие первого модального окна! <div class="mymagicoverbox_fenetreinterieur" style="height:150px; "> <div align="center"> <br>Ты действительно любишь васаби? <br><br> <div style="width:100px" align="center" class="mymagicoverbox_fermer">НЕТ</div> </div> </div> </div> <link href='http://fonts.googleapis.com/css?family=Roboto:100,400,300,500,700' rel='stylesheet' type='text/css'> <div id="box_2" class="mymagicoverbox_fenetre" style="left:-225px; width:450px;"> Заглавие второго модального окна! <div class="mymagicoverbox_fenetreinterieur" style="height:150px; "> <div align="center"> <br>Небо синее? <br><br> <div style="width:100px" align="center" class="mymagicoverbox_fermer">ДА</div> </div> </div> </div> <div style="padding-top:35px;" align="center"> <div style=" color:#ffffff; font-weight:300; font-size:30px; font-family:'Roboto';padding-top:20px;"><font style="font-weight:400;">Wordpress-club.com</font></div> </div> </div> </body> <script src="http://code.jquery.com/jquery-1.11.1.js"></script> <script src="/assets/js/popup.js"></script> </html> А вот так работает, но мне нужно скрипт сделать внешним <html> <meta charset="UTF-8" /> <head> <title>Всплывающие модальные окна (popup) с помощью CSS и JS</title> <style type="text/css"> .fond { position:absolute; padding-top:45px; top:0; left:0; right:0; bottom:0; background-color:#f8b334; } .mymagicoverbox { display:inline-block; color:#ffffff; padding:10px; margin:10px; cursor:pointer; font-weight:300; font-family:'Roboto'; } .mymagicoverbox_fenetre { z-index:9999; position:fixed; margin-left:50%; top:100px; text-align:center; display:none; padding:5px; background-color:#ffffff; color:#97BF0D; font-style:normal; font-size:20px; font-weight:300; font-family:'Roboto'; } .mymagicoverbox_fenetreinterieur { text-align:center; overflow:auto; padding:10px; background-color:#ffffff; color:#666666; font-weight:400; font-family:'Roboto'; font-size:17px; border-top:1px solid #e7e7e7; margin-top:10px } .mymagicoverbox_fermer { color:#CB2025; cursor:pointer; font-weight:400; font-size:14px; font-style:normal font-family:'Roboto'; } #myfond_gris { display: none; background-color:#000000; opacity:0.7; width:100%; height:100%; z-index:9998; position:fixed; top:0; bottom:0; right:0; left:0; } </style> </head> <body> <div align="center" class="fond"> <div id="myfond_gris" opendiv=""></div> <div align="center" style="padding-top:35px;"> <div style="background-color:#00a096;" iddiv="box_1" class="mymagicoverbox"> Нажми на меня ! </div> <div style="background-color:#cb2025;" iddiv="box_2" class="mymagicoverbox"> И на меня тоже... </div> </div> <div id="box_1" class="mymagicoverbox_fenetre" style="left:-225px; width:450px;"> Заглавие первого модального окна! <div class="mymagicoverbox_fenetreinterieur" style="height:150px; "> <div align="center"> <br>Ты действительно любишь васаби? <br><br> <div style="width:100px" align="center" class="mymagicoverbox_fermer">НЕТ</div> </div> </div> </div> <link href='http://fonts.googleapis.com/css?family=Roboto:100,400,300,500,700' rel='stylesheet' type='text/css'> <div id="box_2" class="mymagicoverbox_fenetre" style="left:-225px; width:450px;"> Заглавие второго модального окна! <div class="mymagicoverbox_fenetreinterieur" style="height:150px; "> <div align="center"> <br>Небо синее? <br><br> <div style="width:100px" align="center" class="mymagicoverbox_fermer">ДА</div> </div> </div> </div> <div style="padding-top:35px;" align="center"> <div style=" color:#ffffff; font-weight:300; font-size:30px; font-family:'Roboto';padding-top:20px;"><font style="font-weight:400;">Wordpress-club.com</font></div> </div> </div> </body> <script src="http://code.jquery.com/jquery-1.11.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".mymagicoverbox").click(function() { $('#myfond_gris').fadeIn(300); var iddiv = $(this).attr("iddiv"); $('#'+iddiv).fadeIn(300); $('#myfond_gris').attr('opendiv',iddiv); return false; }); $('#myfond_gris, .mymagicoverbox_fermer').click(function() { var iddiv = $("#myfond_gris").attr('opendiv'); $('#myfond_gris').fadeOut(300); $('#'+iddiv).fadeOut(300); }); }); </script> </html>
