如何使用 java 脚本从不同的 html 文件动态加载引导模式内容？

Question

我想通过单击按钮动态加载位于另一个 html 文件 (record.html) 中的引导程序 model 内容。 请帮我解决问题。 我已经提到了类似的问题并尝试了不同的选项，但仍然无法正常工作。 请帮忙。

检查时出现以下错误：

作为参考，请在下面找到我的代码：

测试2.html

<!DOCTYPE html>
<html lang="english">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Testing2</title>

  <!-- Bootstrap CSS CDN -->
    
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

  <!-- Our Custom CSS -->
  <link rel="stylesheet" href='style.css'>

</head>

<body>

  <button type="button" class="btn-modal" href="record.html" id="buttonCustom">
    launch modal
  </button> 

  <div class="modal fade" id="recordContent">
    <div class="modal-dialog modal-dialog-scrollable modal-lg">
      <div class="modal-content">
      </div>
    </div>
  </div>  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

  <script>
    $("#buttonCustom").click(function(){           
      $('#recordContent').modal('show').find('.modal-content').load($(this).attr('href'));
    });
  </script>    

  <script>
    $(document).on("click","#closeButton",function(){
      $('#recordContent').modal('hide');
    });
  </script>

</body>

</html>

记录.html

<div class="modal-header">    
    <h4 class="modal-title">Modal with Dynamic Content</h4>
    <button type="button" class="close" data-dismiss="modal"></button>
</div>

<div class="modal-body">
    hello this is modal content
</div>

<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal" id="closeButton">Close</button>
</div>

Answer 1

这是你的做法

/*This goes into your HTML page body*/

<div class="modal fade mt-5" role="dialog">
   <div class="modal-dialog modal-lg" id="modalID"></div>
</div>

/*This goes in your script tag*/

<script type="text/javascript">
$(document).ready(function() {
  // Page Modals
  $("#modalID").load("/path/to/your/file", function() {}); 
  /*empty callback but if you want you can do stuff here */
});
</script>

yourModal.html

<div class="modal-content">
  <div class="modal-header bg-white justify-content-center">
    <h5 class="modal-title font-weight-bold ml-auto">MOdal Title</h5>
    <button type="button" class="close text-elegant" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body bg-white">
    /* Your modal dialoge body goes in here
    */
  </div>
</div>

为此，您需要 jquery 3.3 或更高版本

Answer 2

您可以使用以下代码：

 $(document).ready(function () {
                $(function () {
                    $("#buttonCustom").on('click', function (e) {
                        var url = $(this).attr('href');
                        $(".modal-content").html('<object data="' + url + '"/>');
                        $('#recordContent').modal('show');
                    });
                });
            });

如何使用 java 脚本从不同的 html 文件动态加载引导模式内容？

问题描述

2 个解决方案

解决方案1
0 2021-05-22 13:37:55

解决方案2
0 2021-05-22 13:53:29

如何使用 java 脚本从不同的 html 文件动态加载引导模式内容？

问题描述

2 个解决方案

解决方案1 0 2021-05-22 13:37:55

解决方案2 0 2021-05-22 13:53:29

解决方案1
0 2021-05-22 13:37:55

解决方案2
0 2021-05-22 13:53:29