jQuery модальный плагин, выдающий Uncaught TypeError: $ (...). модальный не является функцией - PullRequest
Новая
       38

jQuery модальный плагин, выдающий Uncaught TypeError: $ (...). модальный не является функцией

0 голосов
/ 20 сентября 2019

Я использую отличный плагин jQuery Modal из https://github.com/kylefox/jquery-modal

. Он работает большую часть времени, но я сталкиваюсь со странной проблемой, которую не могу понять.У меня есть 2 типа модалов.Те, кому я звоню, используя rel="modal:open", и другие, которых я использую data-modal, чтобы открыть.data-modal - те, которые вызывают проблемы.

data-modal работают при первом щелчке по одному из них, но если при втором щелкнуть, это не работает и дает мнеUncaught TypeError: $(...).modal is not a function error в консоли.Затем в третий раз нажимается один из них, он работает ... а в четвертый раз - нет.

Вот мой код: 

$(function() {
  $('a[data-modal]').click(function(event) {
      $(this).modal({
        modalClass: "modal-quiz"
      });
      return false;
  });
});
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.flex div.col {
  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 0%, #87afd4 100%);
  background: -webkit-linear-gradient(top, #ffffff 0%, #87afd4 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #87afd4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#87afd4',GradientType=0 );
  border: 2px solid #0055a5;
  box-shadow: 0 3px 4px 2px rgba(0, 0, 0, 0.4);
  text-align: center;
  padding: 10px;
  box-sizing: border-box; }

.flex div.col:first-child {
  margin-left: 1%; }

.flex div.col h2 {
  color: black;
  font-size: 187.5%;
  height: 80px;
  display: block; }

.flex div.col img {
  width: 100%; }

ul.links {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0; }

ul.links li {
  padding: 20px 0;
  border-bottom: 1px solid #5b80a2;
  font-size: 120%; }

ul.links li:last-child {
  border-bottom: 0 none; }

ul.links a:link, ul.links a:visited {
  text-decoration: none;
  font-weight: 700;
  color: #0055a5; }

ul.links a:hover, ul.links a:active {
  color: #fff; }
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Modal test</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

    </head>
    <body>

<div id="wrapper">

    <main class="span_10_of_12">

    <div class="section group flex">
      <div class="col span_4_of_12">
        <h2>Training 1</h2>
        <ul class="links">
          <li><a href="video-1.html" rel="modal:open"> Watch video course</a></li>
          <li><a href="quiz-1.html" data-modal> Test your knowledge</a></li>
        </ul>
      </div>

    	<div class="col span_4_of_12">
      	<h2>Training 2</h2>
        <ul class="links">
          <li><a href="video-2.html" rel="modal:open"> Watch video course</a></li>
          <li><a href="quiz-2.html" data-modal> Test your knowledge</a></li>
        </ul>
    	</div>


    </div>
  </main>

</div>



         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

         <!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

     </body>
 </html>

У кого-нибудь есть идеи, почему модал data-modal выдает ошибку?У меня есть jQuery до модального jQuery, и я использую document.ready в моем jQuery.Любая помощь с благодарностью.

...