Question

我正在使用https://github.com/kylefox/jquery-modal

中出色的jQuery Modal插件

大多数时间它都有效，但是我遇到了一个奇怪的问题，我无法弄清楚。我有两种类型的模态。我使用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，并且在jQuery中使用document.ready。任何帮助将不胜感激。

jQuery模式插件提供了Uncaught TypeError：$（...）。modal不是函数

0 个答案: