时间戳

首页 > 解决方案 > 通过 AJAX（jquery modal）将页面内容加载到模式中

html - 通过 AJAX（jquery modal）将页面内容加载到模式中

问题描述

我正在尝试使用 jquery modal ( https://jquerymodal.com/ ) 创建一个模态。我想通过 AJAX 将页面内容加载到模式中（如示例 4 中所述）。我尝试了下面的代码，但它没有显示模态。

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
</head>
<body>
    <a href="modal.html" rel="modal:open">example</a>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.js"></script>
</body>
</html>

模态的.html

       <div class="modal">
        <p>Second AJAX Example!</p>
      </div>

标签： htmljquery

解决方案

尝试更改调用jQuery文件的位置并将其放置在head标签中

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
    </head>

然后给链接标签一个ID

<a href="ajax.html" id="manual-ajax">second example</a>

然后将脚本添加到 DOM 的底部（在关闭 body 标签之前）

<script>
   // Open modal in AJAX callback
   $('#manual-ajax').click(function(event) {
      event.preventDefault();
      this.blur(); // Manually remove focus from clicked link.
      $.get(this.href, function(html) {
         $(html).appendTo('body').modal();
      });
   });
</script>

推荐阅读