Показать модал из внешнего файла - PullRequest
Новая
       10

Показать модал из внешнего файла

0 голосов
/ 18 июня 2019

У меня есть несколько модальных загрузок на моем сайте, и эти модалы вызываются кнопкой изображения.Я хочу просто основной файл, поэтому я хочу модальные данные, вызываемые из внешних файлов.Но это не сработало, как я ожидал.Первый абзац кода - мой оригинальный код для вызова модального.Вторая часть - мой новый код с назначенным идентификатором и классом.Последняя часть - это моя функция загрузки.Спасибо за вашу помощь!

Я пытался использовать функцию загрузки 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();
});

1 Ответ

1 голос
/ 18 июня 2019

Вы можете попробовать что-то вроде этого: не стесняйтесь изменить его по своему вкусу. 

$("#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>
...