Javascript-форум - Модальные окна arcticModal, подключение JQuery плагина

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Модальные окна arcticModal, подключение JQuery плагина (https://javascript.ru/forum/jquery/77770-modalnye-okna-arcticmodal-podklyuchenie-jquery-plagina.html)

Модальные окна arcticModal, подключение JQuery плагина

Подскажите, что я делаю не так.

Имеется Jquery плагин для реализации модальных окон. Сылка: https://arcticlab.ru/arcticmodal/#desc

Инструкция подключения:

Быстрый старт
Подключаем jQuery и плагин jquery.arcticmodal:

<!-- jQuery -->
<script src="//yandex.st/jquery/1.9.1/jquery.min.js"></script>
 
<!-- arcticModal -->
<script src="js/arcticmodal/jquery.arcticmodal-0.3.min.js"></script>
<link rel="stylesheet" href="js/arcticmodal/jquery.arcticmodal-0.3.css">
 
<!-- arcticModal theme -->
<link rel="stylesheet" href="js/arcticmodal/themes/simple.css">

Вставляю HTML-разметка:

<div style="display: none;">
    <div class="box-modal" id="exampleModal">
        <div class="box-modal_close arcticmodal-close">закрыть</div>
        Пример модального окна
    </div>
</div>

Вставляю javascript:

$(function(){
    $('#exampleModal').arcticmodal();
});

Я это все сделал, но ничего не работает!!
Вот я создал такой HTML файл для тестирования, что тут может быть не так?

<!-- jQuery -->
<script src="https://yandex.st/jquery/1.9.1/jquery.min.js"></script>
 
<!-- arcticModal -->
<script src="jquery.arcticmodal-0.3.min.js"></script>
<link rel="stylesheet" href="jquery.arcticmodal-0.3.css">
 
<!-- arcticModal theme -->
<link rel="stylesheet" href="themes/simple.css">
 
<div style="display: none;">
    <div class="box-modal" id="exampleModal">
        <div class="box-modal_close arcticmodal-close">закрыть</div>
        Пример модального окна
    </div>
</div>
 
<span id="#example1fjjh" onclick="$('#exampleModal').arcticmodal()">Простое модальное окно</span>
 
<script>
$('#exampleModal').arcticmodal();
</script>

Mark0111,
файлы плагина скачали и установили на сервер?

Я скачал файлы плагина. В папке с плагином создал html документ, его содержимое я описал выше. Открываю html файл в браузере, но ничего не работает

Mark0111,
танцы с бубнами, в плагине найдите строку

wrap: undefined,

и замените на

wrap: $("body"),

У них на сайте есть примеры, где все работает. Скорее всего я что то не так делаю... Этот фронт энд может свести с ума, ничего не работает и поди разберись почему.

Mark0111,
да wrap: void 0, на wrap: $("body"),

Mark0111,
второй способ!
заменить $('#exampleModal').arcticmodal(); на

$(function() {
$('#exampleModal').arcticmodal();})

в этом случае плагин можно не трогать

Спасибо! Но теперь в этом тестовом файле работает, а в приложении на локал хостинге нет(

arcticmodal модальное окно

Mark0111,

<!DOCTYPE html>

<html>
<head>
  <title>arcticmodal dark</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vjik/arcticModal@master/arcticmodal/jquery.arcticmodal.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vjik/arcticModal@master/arcticmodal/themes/dark.css">
  <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vjik/arcticModal@master/arcticmodal/themes/simple.css">
  для светлой темы
  -->
  <script src="https://cdn.jsdelivr.net/gh/vjik/arcticModal@master/arcticmodal/jquery.arcticmodal.js"></script>
  <script>
$(function() {
   $('#exampleModal').arcticmodal();
});
  </script>
</head>

<body>
<div style="display: none;">
    <div class="box-modal" id="exampleModal">
        <div class="box-modal_close arcticmodal-close">закрыть</div>
        Пример модального окна
    </div>
</div>

<button id="#example1fjjh" onclick="$('#exampleModal').arcticmodal()">Простое модальное окно</button>
</body>
</html>

Ошибка в браузере:

VM72 jquery-3.3.1.min.js:2 Uncaught TypeError: $(...).arcticmodal is not a function
at HTMLDocument.<anonymous> ((index):70)
at l (VM72 jquery-3.3.1.min.js:2)
at c (VM72 jquery-3.3.1.min.js:2)

Спасибо!!!!!!! Дело было в порядке подключения видимо.Можете объяснить логику

Mark0111,
заменил, пост #11, jquery на 3.3.1 всё работает. не грузите разные версии, нужна только одна на всю страницу.

А как сказать этой функции что бы она не запускалась при загрузке страницы, а запускалась только по клику

Mark0111,
убрать строки

<script>
$(function() {
   $('#exampleModal').arcticmodal();
});
  </script>

Я думал это и работает по клику. Надо учить этот JavaScript, а то я вообще не понимаю что происходит.