Bootstrap 模式：關閉當前，打開新

Question

我已經找了一段時間，但我找不到解決方案。 我想要以下內容：

• 在 Bootstrap 模式中打開一個 URL。 我有這個工作。 所以內容是動態加載的。
• 當用戶按下此模式中的按鈕時，我希望隱藏當前模式，然后立即使用新 URL（用戶單擊的 URL）打開一個新模式。 第二個模態的內容也是動態加載的。
• 如果用戶隨后關閉了第二個模態，則第一個模態必須再次返回。

我已經盯着這個好幾天了，希望有人能幫助我。

提前致謝。

Answer 1

我知道這是一個遲到的答案，但它可能有用。 正如@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>

演示

Answer 2

沒有看到具體的代碼，很難給你一個准確的答案。 但是，從 Bootstrap 文檔中，您可以像這樣隱藏模式：

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

然后，在隱藏后顯示另一個模式：

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

您將不得不找到一種方法將 URL 推送到新的模式窗口，但我認為這很簡單。 如果沒有看到代碼，很難給出一個例子。

Answer 3

它不完全是響應，但是當您想關閉當前模態並打開新模態時它很有用。

在同一個按鈕的 html 中，您可以要求使用 data-dismiss 關閉當前模態並直接使用 data-target 打開一個新模態：

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

Answer 4

data-dismiss="modal"是它會將您的內容向左移動

我正在分享對我有用的東西，問題陳述是從pop2打開pop1

代碼

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

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

Answer 5

我用這個方法：

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

Answer 6

如上所述，在同一個按鈕的 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 ; "

Answer 7

通過使用以下代碼，您可以隱藏第一個模式並立即打開第二個模式，通過使用相同的策略，您可以隱藏第二個模式並顯示第一個。

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

Answer 8

您需要將以下屬性添加到要添加此功能的鏈接或按鈕：

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

詳細博客： http ://sforsuresh.in/bootstrap-modal-window-close-current-open-new-modal/

Answer 9

data-dismiss="modal" 

它用於關閉現有打開的模型。 您可以將其設置為新模型

Answer 10

使用 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 （首先單擊“啟動演示模式”）。

Answer 11

我有完全相同的問題，我的解決方案僅當模態對話框具有 [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;}
    }
  });
});

Answer 12

我遇到了與@Gravity Grave 相同的問題，如果您使用，則滾動不起作用

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

和這個結合

data-dismiss="modal"

滾動無法正常工作並恢復為滾動頁面而不是模式。 這是由於 data-dismiss 從標簽中刪除了 modal-open 類。

我最終的解決方案是在模態上設置內部組件的 html 並使用 css 淡入/淡出文本。

Answer 13

有同樣的問題，寫在這里以防將來有人偶然發現這個問題並且有多個模態也必須滾動的問題（我正在使用 Bootstrap 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>

Answer 14

對於 Bootstrap v4

您可以通過將data-dismiss="modal"和data-toggle="modal"放在同一個 HTML 元素中來在data-toggle="modal" 。 您還需要將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，並且將第一個模式作為其自己的部分視圖，則該視圖中不能有第二個模式。 您需要將第二個模式放在父視圖中。

Answer 15

使用點擊功能：

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

抬頭：

確保您要顯示的是一個獨立的模態。

Answer 16

在第一個模態中：

用下面的關閉鏈接替換頁腳中的模式關閉鏈接。

<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">

Answer 17

試試這個

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

Answer 18

這段代碼，關閉模態打開，打開新模態但立即，新模態被關閉。

$(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');
    });
}

Answer 19

$("#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})});

Answer 20

我用另一種方式：

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

Answer 21

如果要在打開新模式時關閉先前打開的模式，則必須從 javascript/jquery 執行此操作，首先關閉當前打開的模式，然后設置 400 毫秒超時以允許其關閉，然后打開新模式，如下面的代碼：

$('#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 在評論中提到的滾動問題。

Answer 22

沒有一個答案對我有幫助，因為我想實現與問題中提到的完全相同的東西。

為此，我創建了一個 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');
        }
    },
});

工作小提琴供參考， JSFiddle： https ://jsfiddle.net/gumdal/67hzgp5c/

你只需要使用我的新 API “ showStackedModal() ”而不是“ modal('show') ”來調用。 隱藏部分仍然可以與以前相同，並且會自動注意顯示和隱藏模態的堆疊方法。

Answer 23

BootStrap 3.x 的簡單而優雅的解決方案。 可以通過這種方式重復使用相同的模態。

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

Answer 24

如果您使用 mdb 使用此代碼

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

Answer 25

<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 />

Answer 26

我可能有點晚了，但我想我已經找到了可行的解決方案。

必填 -

jQuery

所有帶有關閉/關閉按鈕的模式，其屬性設置如下 -

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

請查看添加到按鈕類中的close_modal類

現在要關閉所有現有的模態，我們將調用

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

所以，無論你想打開一個模態

只需添加上面的代碼，您所有打開的模態都會關閉。

然后添加您的正常代碼以打開所需的模態

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

Answer 27

隱藏模式對話框。

方法一：使用Bootstrap。

$('.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

Answer 28

只需復制並粘貼此代碼，您就可以試驗兩種模式。 關閉第一個模態后打開第二個模態：

<!-- 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>

干杯!

Answer 29

在打開一個新的模態之前關閉所有打開的模態

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