programing

부트스트랩 모달: 현재 닫기, 새로 열기

starjava 2023. 8. 30. 21:04
반응형

부트스트랩 모달: 현재 닫기, 새로 열기

저는 한동안 찾아봤지만, 이것에 대한 해결책을 찾을 수 없습니다.다음을 원합니다.

  • 부트스트랩 모달 내부의 URL을 엽니다.저는 코스를 벗어나서 일을 하고 있어요.따라서 콘텐츠가 동적으로 로드됩니다.
  • 사용자가 이 모달 안에 있는 버튼을 누르면 현재 모달이 숨기기를 원하며, 그 직후 새 모달이 새 URL(사용자가 클릭한 URL)로 열리기를 원합니다.두 번째 모달의 이 내용도 동적으로 로드됩니다.
  • 그런 다음 사용자가 두 번째 모달을 닫으면 첫 번째 모달이 다시 와야 합니다.

이것이 늦은 답변이라는 것을 알지만, 유용할 수도 있습니다.위에서 @karima가 언급한 것처럼, 이것을 수행하기 위한 적절하고 깨끗한 방법이 있습니다.는 두 할 수 있습니다.trigger그리고.dismiss

HTML 마크업;

<!-- Button trigger modal -->
<ANY data-toggle="modal" data-target="TARGET">...</ANY>

<div class="modal fade" id="SELECTOR" tabindex="-1">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-body"> ... </div>
     <div class="modal-footer">           <!-- ↓ -->  <!--      ↓      -->
      <ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal">...</ANY>
     </div>
   </div>
  </div>
</div>

데모

구체적인 코드를 보지 않으면 정확한 답변을 드리기 어렵습니다.그러나 부트스트랩 문서에서 다음과 같은 모달을 숨길 수 있습니다.

$('#myModal').modal('hide')

숨기면 다른 모달을 표시합니다.

$('#myModal').on('hidden.bs.modal', function () {
  // Load up a new modal...
  $('#myModalNew').modal('show')
})

URL을 새 모달 창에 푸시하는 방법을 찾아야 하지만, 이는 사소한 것일 것입니다.코드를 보지 않고는 그 예를 들기가 어렵습니다.

정확한 응답은 아니지만 현재 모달을 닫고 새 모달을 열 때 유용합니다.

같은 버튼의 html에서 현재 모달을 data-dismiss로 닫고 data-target으로 직접 새 모달을 열도록 요청할 수 있습니다.

<button class="btn btn-success" 
data-toggle="modal" 
data-target="#modalRegistration" 
data-dismiss="modal">Register</button>

다음 방법을 사용합니다.

$(function() {
  return $(".modal").on("show.bs.modal", function() {
    var curModal;
    curModal = this;
    $(".modal").each(function() {
      if (this !== curModal) {
        $(this).modal("hide");
      }
    });
  });
});

문제:data-dismiss="modal"요?

저에게 합니다, 되었습니다. 문제 설명문이 열리고 있었습니다.pop1pop2

JS 코드

var showPopup2 = false;
$('#popup1').on('hidden.bs.modal', function () {
    if (showPopup2) {
        $('#popup2').modal('show');
        showPopup2 = false;
    }
});

$("#popup2").click(function() {
    $('#popup1').modal('hide');
    showPopup2 = true;
});

위에서 언급한 것처럼 동일한 버튼의 html에서 현재 모달을 data-dismiss로 닫고 data-target으로 직접 새 모달을 열도록 요청할 수 있습니다.

<button class="btn btn-success" data-toggle="modal" data-target="#modalRegistration" data-dismiss="modal">Register</button>

그러나 이 경우 스크롤 막대가 사라지며 두 번째 모달이 첫 번째 모달보다 클 경우 표시됩니다.

따라서 해결책은 다음 스타일을 모달 인라인 스타일로 추가하는 것입니다.

Style = "overflow-y : scroll ; "

다음 코드를 사용하여 첫 번째 모달을 숨기고 두 번째 모달을 즉시 열 수 있으며, 동일한 전략을 사용하여 두 번째 모달을 숨기고 첫 번째 모달을 표시할 수 있습니다.

$("#buttonId").on("click", function(){
    $("#currentModalId").modal("hide");
    $("#currentModalId").on("hidden.bs.modal",function(){
    $("#newModalId").modal("show");
    });
});

이 기능을 추가할 링크나 단추에 다음 속성을 추가해야 합니다.

 data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword"

자세한 블로그: http://sforsuresh.in/bootstrap-modal-window-close-current-open-new-modal/

data-dismiss="modal"

열려 있는 기존 모형을 닫는 데 사용됩니다.새 모델로 설정할 수 있습니다.

부트스트랩 v4의 경우

퍼팅을 통해 모델 간을 전환할 수 있습니다.data-dismiss="modal"그리고.data-toggle="modal"동일한 HTML 요소에 있습니다.당신은 또한 필요할 것입니다.data-target열려는 모달의 속성 집합입니다.

다음은 예입니다.

<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#Modal2" >
Open second modal
</button>

각 모델에 대한 ID를 설정하고 데이터 대상이 열려는 모델을 가리키도록 해야 합니다.

부트스트랩 v5의 경우

만 하는 v4와 .data-bs-toggle data-bs-dismiss그리고.data-bs-target

다음과 같이:

<button class="btn btn-primary" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#Modal2" >
Open second modal
</button>

v5 설명서에 이러한 예가 포함되어 있습니다.

참고:

이 작업을 수행하려면 두 모델이 서로 중첩되지 않고 서로 독립적이어야 합니다.따라서 MVC 프레임워크를 사용하는 경우 ASP를 예로 들 수 있습니다.NET MVC, 그리고 첫 번째 모달을 자체 부분 뷰로 가지고, 당신은 그 뷰에서 두 번째 모달을 가질 수 없습니다.상위 보기에 두 번째 모달을 넣어야 합니다.

BootStrap 3을 사용하면 다음을 시도할 수 있습니다.

var visible_modal = jQuery('.modal.in').attr('id'); // modalID or undefined
if (visible_modal) { // modal is active
    jQuery('#' + visible_modal).modal('hide'); // close modal
}

테스트를 거친 사용자: http://getbootstrap.com/javascript/ #modals("Demo Modal 시작"을 먼저 클릭).

저도 똑같은 문제가 있는데, 제 해결책은 모달 대화 상자에 [role="dialog"] 속성이 있는 경우에만 가능합니다.

/*
* Find and Close current "display:block" dialog,
* if another data-toggle=modal is clicked
*/
jQuery(document).on('click','[data-toggle*=modal]',function(){
  jQuery('[role*=dialog]').each(function(){
    switch(jQuery(this).css('display')){
      case('block'):{jQuery('#'+jQuery(this).attr('id')).modal('hide'); break;}
    }
  });
});

저는 @Gravity Grave와 동일한 문제가 있어서 사용하면 스크롤이 작동하지 않습니다.

data-toggle="modal" data-target="TARGET-2"

와 함께

data-dismiss="modal"

스크롤이 제대로 작동하지 않고 모달이 아닌 페이지 스크롤로 돌아갑니다.이는 태그에서 modal-open 클래스를 제거하는 데이터 제거로 인해 발생합니다.

결국 저의 해결책은 내부 구성 요소의 html을 모달에 설정하고 CSS를 사용하여 텍스트를 페이드 인/아웃하는 것이었습니다.

같은 문제가 있었습니다. 미래의 누군가가 이 문제에 걸려 스크롤해야 하는 여러 모델에 문제가 있을 경우를 대비하여 여기에 이 문제를 작성합니다(나는 부트스트랩 3.3.7을 사용하고 있습니다).

제가 한 것은 제 첫 번째 모달 안에 이런 버튼이 있는 것입니다.

<div id="FirstId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_2">Open modal</div>

첫 번째 모드를 숨긴 다음 두 번째 모드를 표시하고 두 번째 모드에서는 다음과 같은 닫기 버튼을 사용합니다.

<div id="SecondId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_1">Close</div>

그러면 두 번째 모달이 닫히고 첫 번째 모달이 열리며 스크롤이 작동하도록 하기 위해 다음 줄로 .css 파일에 추가했습니다.

.modal {
overflow: auto !important;
}

PS: 참고로, 당신은 이 모달들을 따로 가지고 있어야 합니다. 당신이 첫 번째 모달을 숨길 때, 작은 모달은 첫 번째 모달에 내포될 수 없습니다.

부트스트랩 모달 예제를 기반으로 한 전체 예제는 다음과 같습니다.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal 1 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Add lorem ipsum here
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#exampleModal2">
          Open second modal
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Modal 2 -->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal"  data-toggle="modal" data-target="#exampleModal">Close</button>
      </div>
    </div>
  </div>
</div>

이 코드는 닫힘 모달이 열리면 새 모달이 열리지만 즉시 새 모달이 닫힙니다.

$(nameClose).modal('hide');
$(nameOpen).modal('show');

오픈 뉴 모달에 대한 나의 해결책은 다음과 같습니다.

function swapModals(nameClose,nameOpen) {
    $(nameClose).modal('hide');
    $(nameClose).on('hidden.bs.modal', function () {
        console.log('Fired when hide event has finished!');
        $(nameOpen).modal('show');
    });
}

새 모델을 열기 전에 열려 있는 모든 모델을 닫습니다.

$('.modal').modal('hide'); // close all open modals
$('#login').modal('show'); // open a modal named #login

클릭 기능 사용:

$('.btn-editUser').on('click', function(){
    $('#viewUser').modal('hide'); // hides modal with id viewUser 
    $('#editUser').modal('show'); // display modal with id editUser
});

주의:

표시할 모드가 독립적인지 확인합니다.

첫 번째 모달에서:

바닥글의 모달 해제 링크를 아래의 닫기 링크로 바꿉니다.

<div class="modal-footer">
      <a href="#"  data-dismiss="modal" class="btn btn-primary" data-toggle="modal" data-target="#second_model_id">Close</a>
</div>

두 번째 모달:

그런 다음 두 번째 모달은 상위 div를 하위 div 태그로 바꿉니다.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="add text for disabled people here" aria-hidden="true" id="second_model_id">

사용해 보세요.

    $('#model1').modal('hide');
setTimeout(function(){
    $('#modal2').modal('show');
},400);

$("#buttonid").click(function(){
    $('#modal_id_you_want_to_hid').modal('hide')
});

// same as above button id
$("#buttonid").click(function(){
$('#Modal_id_You_Want_to_Show').modal({backdrop: 'static', keyboard: false})});

다른 방법을 사용합니다.

$('#showModal').on('hidden.bs.modal', function() {
        $('#easyModal').on('shown.bs.modal', function() {
            $('body').addClass('modal-open');
        });
    });

새 모달을 열 때 이전에 연 모달을 닫으려면 먼저 현재 열린 모달을 닫은 다음 400ms의 시간 제한을 주어 다음 코드와 같이 새 모달을 열어야 합니다.

$('#currentModal').modal('hide');

setTimeout(function() {
       //your code to be executed after 200 msecond 
       $('#newModal').modal({
           backdrop: 'static'//to disable click close
   })
}, 400);//delay in miliseconds##1000=1second

만약 당신이 그것을 하려고 한다면.data-dismiss="modal"그러면 @gravity 및 @kuldeep 코멘트에서 언급한 대로 스크롤 문제가 발생합니다.

질문에 언급된 것과 정확히 같은 것을 달성하고 싶었기 때문에 어떤 대답도 도움이 되지 않았습니다.

이를 위해 jQuery 플러그인을 만들었습니다.

/*
 * Raj: This file is responsible to display the modals in a stacked fashion. Example:
 * 1. User displays modal A
 * 2. User now wants to display modal B -> This will not work by default if a modal is already displayed
 * 3. User dismisses modal B
 * 4. Modal A should now be displayed automatically -> This does not happen all by itself 
 * 
 * Trying to solve problem for: http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new
 * 
 */

var StackedModalNamespace = StackedModalNamespace || (function() {
    var _modalObjectsStack = [];
    return {
        modalStack: function() {
            return _modalObjectsStack;
        },
        currentTop: function() {
            var topModal = null;
            if (StackedModalNamespace.modalStack().length) {
                topModal = StackedModalNamespace.modalStack()[StackedModalNamespace.modalStack().length-1];
            }
            return topModal;
        }
    };
}());

// http://stackoverflow.com/a/13992290/260665 difference between $.fn.extend and $.extend
jQuery.fn.extend({
    // https://api.jquery.com/jquery.fn.extend/
    showStackedModal: function() {
        var topModal = StackedModalNamespace.currentTop();
        StackedModalNamespace.modalStack().push(this);
        this.off('hidden.bs.modal').on('hidden.bs.modal', function(){   // Subscription to the hide event
            var currentTop = StackedModalNamespace.currentTop();
            if ($(this).is(currentTop)) {
                // 4. Unwinding - If user has dismissed the top most modal we need to remove it form the stack and display the now new top modal (which happens in point 3 below)
                StackedModalNamespace.modalStack().pop();
            }
            var newTop = StackedModalNamespace.currentTop();
            if (newTop) {
                // 3. Display the new top modal (since the existing modal would have been hidden by point 2 now)
                newTop.modal('show');
            }
        });
        if (topModal) {
            // 2. If some modal is displayed, lets hide it
            topModal.modal('hide');
        } else {
            // 1. If no modal is displayed, just display the modal
            this.modal('show');
        }
    },
});

참고용 작업 피들, JSFidle: https://jsfiddle.net/gumdal/67hzgp5c/

당신은 단지 내 새로운 API로 호출하면 됩니다.showStackedModal()"라는 말 대신에modal('show')숨김 부분은 여전히 이전과 동일할 수 있으며 모드를 표시하고 숨기는 스택 방식이 자동으로 적용됩니다.

BootStrap 3.x를 위한 간단하고 우아한 솔루션.이 방법으로 동일한 모달을 재사용할 수 있습니다.

$("#myModal").modal("hide");
$('#myModal').on('hidden.bs.modal', function (e) {
   $("#myModal").html(data);
   $("#myModal").modal();
   // do something more...
});

mdb를 사용하는 경우 이 코드를 사용합니다.

    var visible_modal = $('.modal.show').attr('id'); // modalID or undefined
    if (visible_modal) { // modal is active
        $('#' + visible_modal).modal('hide'); // close modal
    }

<div class="container">
  <h1>Bootstrap modal: close current, open new</h1>
  <p class="text-muted">
  A proper and clean way to get this done without addtional Javascript/jQuery. The main purpose of this demo is was to answer this 
  <a href="http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new">question on stackoverflow</a>
  </p>
  <hr />

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1">Launch Modal #1</button>
  <button type="button" class="btn btn-info"    data-toggle="modal" data-target="#demo-2">Launch Modal #2</button>
  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3">Launch Modal #3</button>

  <!-- [ Modal #1 ] -->
  <div class="modal fade" id="demo-1" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #1</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
        </div>
     </div>
    </div>
  </div>

  <!-- [ Modal #2 ] -->
  <div class="modal fade" id="demo-2" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #2</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
        </div>
     </div>
    </div>
  </div>

  <!-- [ Modal #3 ] -->
  <div class="modal fade" id="demo-3" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #3</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
        </div>
     </div>
    </div>
  </div>

  <hr />
  <h3 class="caps">Usage:</h3>
<pre class="prettyprint">&lt;!-- Button trigger modal --&gt;
&lt;ANY data-toggle="modal" data-target="TARGET"&gt;...&lt;/ANY&gt;

&lt;div class="modal fade" id="SELECTOR" tabindex="-1"&gt;
  &lt;div class="modal-dialog"&gt;
   &lt;div class="modal-content"&gt;
    &lt;div class="modal-body"&gt; ... &lt;/div&gt;
     &lt;div class="modal-footer"&gt;           &lt;!-- ↓ --&gt;  &lt;!--      ↓      --&gt;
      &lt;ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal"&gt;...&lt;/ANY&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
</div> <!-- end .container -->

<hr />
<footer class="text-center"><a href="https://twitter.com/_elmahdim">@_elmahdim</a></footer>
<br />
<br />

제가 좀 늦을 수도 있지만, 해결책을 찾은 것 같습니다.

필수 -

jQuery

닫기/해제 버튼이 있는 모든 모델의 속성은 다음과 같이 설정됩니다.

<button type="button" class="btn close_modal" data-toggle="modal" data-target="#Modal">Close</button>

버튼의 클래스에 close_modal 클래스가 추가되었습니다.

이제 기존 모델을 모두 닫으려면 다음을 호출합니다.

$(".close_modal").trigger("click");

그래서, 모달을 열고 싶은 곳은 어디든

위의 코드를 추가하기만 하면 열려 있는 모든 모델이 닫힙니다.

그런 다음 일반 코드를 추가하여 원하는 모달을 엽니다.

$("#DesiredModal").modal();

모달 대화 상자를 숨깁니다.

방법 1: 부트스트랩 사용.

$('.close').click(); 
$("#MyModal .close").click();
$('#myModalAlert').modal('hide');

방법 2: 사용stopPropagation().

$("a.close").on("click", function(e) {
  $("#modal").modal("hide");
  e.stopPropagation();
});

메소드 3: 표시된 메소드를 호출한 후.

$('#myModal').on('shown', function () {
  $('#myModal').modal('hide');
})

방법 4: CSS 사용.

this.display='block'; //set block CSS
this.display='none'; //set none CSS after close dialog

이 코드를 복사하여 붙여넣기만 하면 두 가지 모드로 실험할 수 있습니다.첫 번째 모달을 닫은 후 두 번째 모달이 열립니다.

<!-- Button to Open the Modal -->
<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">
                Modal body..
            </div>

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

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



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

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

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

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

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




<script>
    $('#myModal').on('hidden.bs.modal', function () {
        $('#myModal2').modal('show')
    })
</script>

건배!

이를 통해 리액트/Next의 문제가 해결되었습니다.Js 성분.나는 필요하지 않았습니다.data-bs-dismis="modal"기여하다.data-bs-dismis="modal"실제로 모달을 숨기고 목표물로 라우팅하지 않았기 때문에 제거했습니다.이것이 어떤 식으로든 도움이 되기를 바랍니다.말 그대로 같은 것이기 때문에 일반 html도 마찬가지인 것 같습니다.

<div className='container d-flex flex-column justify-content-center align-items-center my-2'>
     <span className='py-3'>
         Don't have an Account,
         <a href='/retail-user/' data-target='/retail-user/'>Create One
         </a>
     </span>
</div>

언급URL : https://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new

반응형

'programing' 카테고리의 다른 글

e에 해당하는 것이 있습니까?클릭 이벤트와 마찬가지로 '터치 스타트' 이벤트의 X페이지 위치는 무엇입니까?  (0) 2023.08.30
PowerShell에서 숫자 HTTP 상태 코드를 가져오는 방법  (0) 2023.08.30
EF: 삭제 시 null 가능한 외부 키가 작동하지 않는 작업 없음  (0) 2023.08.30
MySQL - 하위 쿼리를 기반으로 값 업데이트  (0) 2023.08.30
'클릭' 이벤트 시 Ctrl / Shift / Alt 키 확인  (0) 2023.08.30

'programing'의 다른글

  • 현재글부트스트랩 모달: 현재 닫기, 새로 열기

관련글

댓글

티스토리툴바