我的网站中有一些引导模态，这些模态通过图像按钮调用。我只想主文件，所以我想要从外部文件调用的模态数据。但它没有像我预期的那样工作。第一段代码是我调用模态的原始代码。第二部分是我的新代码，带有分配的 id 和类。最后一部分是我的加载功能。感谢您的帮助!
我尝试使用js加载函数从外部文件加载模态数据，但是当我点击图像时它没有效果。
**Original Code**
<div class="col-md-2 col-4"> \\Original Code to invoke modal
<button type="button" class="playerbutton" data-toggle="modal" data-
target="#three"><img src="images\123.png" class="squadplayerimg">
</button>
<!-- player Modal -->
<div class="modal fade" id="three" tabindex="-1" role="dialog" aria-
labelledby="three" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Player Info</h5>
Main modal body and data ........
</div>
**New Code**
<div class="col-md-2 col-4">
<button type="button" class="playerbutton test"><img
src="images\123.png" class="squadplayerimg"></button>
<div id="three" class="modal fade text-center">
<div class="modal-dialog">
<div class="modal-content">
Get data from outside files
</div>
</div>
</div>
</div>
**js load function**
$('test').load("newmodal.html #three",function(){
$('#three').modal();
});
最佳答案
你可以尝试这样的事情: 您可以根据自己的喜好随意更改。
$("#somediv").click(function() {
opendialog("http://jsbooks.revolunet.com/");
});
function opendialog(page) {
var $dialog = $('#somediv')
.html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
.dialog({
title: "Page",
autoOpen: false,
dialogClass: 'dialog_fixed,ui-widget-header',
modal: true,
height: 500,
minWidth: 400,
minHeight: 400,
draggable:true,
/*close: function () { $(this).remove(); },*/
buttons: { "Ok": function () { $(this).dialog("close"); } }
});
$dialog.dialog('open');
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dialog with page</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
</head>
<body>
<div id="somediv">
Click me!
</div>
</body>
</html>关于javascript - 从外部文件显示模态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56652869/