Открытие ссылки внутри div в модале - PullRequest
Новая
       50

Открытие ссылки внутри div в модале

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

У меня есть модал, в котором есть 2 <a> тегов. Когда пользователь щелкает ссылку, ссылка должна открываться в том же самом диве того же модального и , а не на вкладке .

Для этого я пробовал: 

$(document).ready(function() {
  $("#help_modal a").each(function() {
    $("#help_modal").load($(this).attr("href"));
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body" id="help_modal">
          <a href="https://google.com" class="btn btn-block btn-lg btn-primary">Open Google</a>
          <a href="https://stackoverflow.com" class="btn btn-block btn-lg btn-secondary">Open Stackoverflow</a>
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
  </div>

</div>

Но ссылка открывается в той же вкладке ...

UPDATE

Я также пытался этот ответ , но он также не работал для меня после этого комментария .

Ответы [ 2 ]

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

Ответ на ваш комментарий :

Если вы проверяете консоль во время запуска JSFiddle , она говорит:

отказался отображать ' Открытие ссылки внутри div в модальном ' в кадре, потому что предок нарушает следующую безопасность содержимого Политическая директива: «фрейм-предки« я »».

Что означает,

Содержимое запрещено отображать в IFRAME из-за установленной Политики безопасности содержимого. Веб-сервер, на котором размещается stackoverflow.com, настроен на добавление HTTP-заголовка к объекту ответа. В частности, они устанавливают для тега Content-Security-Policy значение frame-ancestors 'self'. Вы не сможете встраивать их страницы в свои собственные страницы с помощью IFRAME.

Благодаря ответу TimmyB .

Ответ на ваш вопрос :

Ответ учащегося также является хорошим вариантом. (+1)

Но я бы предпочел иметь различные iframe (s) и отображать их через кнопку. 

$(document).ready(function() {
  $(".modal_button_example_com_self").click(function() {
    $('.modal_button_self').hide();
    $('#example_com').attr("style", "");
  });

  $(".modal_button_example_net_self").click(function() {
    $('.modal_button_self').hide();
    $('#example_net').attr("style", "");
  });

  $(".close_self").click(function() {
    $('.modal_button_self').attr("style", "");
    $('#example_com').hide();
    $('#example_net').hide();
  });

});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        Open modal
    </button>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close close_self" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body" id="help_modal">
          <button class="modal_button_self modal_button_example_com_self btn btn-block btn-lg btn-primary">Open Example.com</button>
          <button class="modal_button_self modal_button_example_net_self btn btn-block btn-lg btn-secondary">Open Example.net</button>

          <iframe id="example_com" style="display: none;" src="https://example.com/" width="100%" height="50%" seamless></iframe>
          <iframe id="example_net" style="display: none;" src="https://example.net/" width="100%" height="50%" seamless></iframe>

        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger close_self" data-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
  </div>
</div>
1 голос
/ 09 июня 2019

Мне удается добиться того, что вы хотите, с помощью некоторого JavaScript и HTML-тега 'object':

Я заменяю содержимое вашего модального тела содержимым переменной toReplace, содержащей html-элемент 'object', который используется для встраивания внешней ссылки. 

let el = document.getElementById("test");
let elToReplace = document.getElementById("help_modal");
let toReplace = "<object type=\"text/html\" data=\"https://gnu.org/\" width=\"100%\" height=\"600px\" style=\"overflow:auto;border:5px ridge blue\"> </object>";

function replaceInner() {
    elToReplace.innerHTML = toReplace;
}

el.addEventListener("click", () => { replaceInner(); }, false);

См. Рабочий код здесь: https://codepen.io/marc-simplon/pen/WBVmYW

...