Подключение js к html

khomchenko · 29 января, 2017

Есть код, к которому надо подкл 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>

mrnobody · 29 января, 2017

Скрипты подключите перед закрывающимся тегом </body>, а не после него.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
  <!-- Content -->

  <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  <script src="/assets/js/popup.js"></script>
</body>
</html>

И у вас странный атрибут iddiv. Наверное лучше сделать data-iddiv="box_1", и обращаться к нему с помощью метода data вот так:

var iddiv = $(this).data("iddiv");

Войти

Подключение js к html

Вопрос

khomchenko 0

Поделиться сообщением

Ссылка на сообщение

Поделиться на других сайтах

1 ответ на этот вопрос

Рекомендуемые сообщения

mrnobody 204

Поделиться сообщением

Ссылка на сообщение

Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Создать аккаунт

Войти

Похожие публикации

Ближайшие события

Текущие цели пожертвований

Лучшие авторы

Сообщество

Блоги

Активность

Магазин