sourcecode

새 탭에서 부트스트랩 모달 열기

copyscript 2022. 7. 27. 23:53
반응형

새 탭에서 부트스트랩 모달 열기

오픈할 수 있는 방법이 있나요?bootstrap modal클릭 후 새 탭으로 이동middle mouse button(또는 클릭만 하면 됩니다)right mouse button아이템과click"새 탭에서 열기"

예상되는 동작:

사용자는 다음을 클릭하여 동일한 탭에서 모달 열기left mouse button아이템으로또, 유저에게middle mouse button새 탭에서 모달 열기.

비슷한 작업(아래 링크)은 할 수 있지만 다음 링크에서는 처리할 수 없습니다.modal어떻게 해서든 새로운 탭으로 모달 전달이 가능합니까?

JSFiddle:http://jsfiddle.net/vqxf7zyk/1/

(Google로 리다이렉트하는 대신 탭에 새로운 모달(modal)이 있어야 합니다.)

솔루션(기준)@RohitSharma답변) :

http://jsfiddle.net/vqxf7zyk/10/

쓸 수 있어요.정상적으로 동작하고 있습니다.

$(document).ready(function() {
  $('.btn-info.btn-lg').mousedown(function(event) {
    if (event.which == 2) {
      event.preventDefault();
      window.open(document.URL + '#myModal', '');
    }
  });
  $(window).load(function() {
    $(window.location.hash).modal("show");
  });
});

function openModal() {
  window.open(document.URL + '#myModal', '');
  $(window.location.hash).modal("show");
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" contextmenu="mymenu">Open Modal</button>


<!-- menu will work only in firefox -->
<menu type="context" id="mymenu">
  <menuitem label="Open this modal in new tab" onclick="openModal()" icon="/images/refresh-icon.png"></menuitem>
</menu>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

사용하였습니다.ID새 탭에서 URL을 열 때 추가할 모달의 이름을 지정합니다.그리고 같은 아이디를 얻었다.window.location.hash모드를 엽니다.

콘텍스트 메뉴에서 새 탭에서 모달 열기 링크를 찾을 수 없어서 콘텍스트 메뉴를 수동으로 추가했습니다.이것은 파이어폭스에서만 동작합니다.자세한 내용은 w3schools.com 에서 보실있습니다.

웹 사이트 브라우저와 호환되도록 하려면 사용자 정의 컨텍스트 메뉴를 사용할 수 있습니다.

현재 이 예는 모든 브라우저에서 미들클릭용으로 사용할 수 있으며 파이어폭스에서는 컨텍스트메뉴용으로만 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/45008678/open-bootstrap-modal-in-new-tab

반응형