Bootstrap modal: ปิดปัจจุบันเปิดใหม่

ฉันมองหามาระยะหนึ่งแล้ว แต่ไม่พบวิธีแก้ปัญหานี้ ฉันต้องการสิ่งต่อไปนี้:

• เปิด URL ภายในโมดอล Bootstrap ฉันมีงานนอกหลักสูตรนี้ ดังนั้นเนื้อหาจึงถูกโหลดแบบไดนามิก
• เมื่อผู้ใช้กดปุ่มภายในโมดอลนี้ฉันต้องการให้โมดอลปัจจุบันซ่อนอยู่และหลังจากนั้นฉันต้องการให้โมดอลใหม่เปิดขึ้นพร้อมกับ URL ใหม่ (ซึ่งผู้ใช้คลิก) เนื้อหาของโมดอลที่ 2 นี้ยังโหลดแบบไดนามิก
• หากผู้ใช้ปิดโมดอลที่ 2 นั้นโมดอลแรกจะต้องกลับมาอีกครั้ง

ฉันจ้องมองเรื่องนี้มาหลายวันแล้วหวังว่าจะมีคนช่วยฉันได้

ขอบคุณล่วงหน้า.

หากไม่เห็นรหัสเฉพาะก็ยากที่จะให้คำตอบที่แม่นยำแก่คุณ อย่างไรก็ตามจากเอกสาร Bootstrap คุณสามารถซ่อนโมดอลได้ดังนี้:

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

จากนั้นแสดงโมดอลอื่นเมื่อถูกซ่อน:

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

คุณจะต้องหาวิธีผลักดัน 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>

การสาธิต

มันไม่ตรงกับการตอบสนอง แต่มีประโยชน์เมื่อคุณต้องการปิดโมดอลปัจจุบันและเปิดโมดอลใหม่

ใน html ในปุ่มเดียวกันคุณสามารถขอให้ปิดโมดอลปัจจุบันด้วย data-เลิกและเปิดโมดอลใหม่โดยตรงกับ data-target:

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

ปัญหาdata-dismiss="modal"คือมันจะเลื่อนเนื้อหาของคุณไปทางซ้าย

ฉันกำลังแบ่งปันสิ่งที่ได้ผลสำหรับฉันสถิติปัญหากำลังเปิดpop1จากpop2

รหัส 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;
});

ฉันใช้วิธีนี้:

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

ด้วยการใช้รหัสต่อไปนี้คุณสามารถซ่อนโมดอลแรกและเปิดโมดอลที่สองได้ทันทีโดยใช้กลยุทธ์เดียวกันคุณสามารถซ่อนโมดอลที่สองและแสดงโมดอลแรกได้

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

บล็อก detaile: http://sforsuresh.in/bootstrap-modal-window-close-current-open-new-modal/

data-dismiss="modal" 

ใช้เพื่อปิดโมเดลที่เปิดอยู่ คุณสามารถตั้งค่าเป็นรุ่นใหม่ได้

ดังที่กล่าวไว้ข้างต้นใน html ในปุ่มเดียวกันคุณสามารถขอให้ปิดโมดอลปัจจุบันด้วย data-เลิกและเปิดโมดอลใหม่โดยตรงกับ data-target:

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

แต่สิ่งนี้จะทำให้แถบเลื่อนหายไปและคุณจะสังเกตเห็นว่าถ้าโมดอลที่สองยาวกว่าอันแรก

ดังนั้นวิธีแก้ปัญหาคือการเพิ่มสไตล์ต่อไปนี้ในสไตล์อินไลน์ของโมดอล:

Style = "overflow-y : scroll ; "

ด้วย 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 (คลิกที่ "Launch 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 เพื่อทำให้ข้อความเข้า / ออกจางลง

การใช้ฟังก์ชันคลิก:

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

มีปัญหาเดียวกันเขียนสิ่งนี้ที่นี่ในกรณีที่มีคนในอนาคตสะดุดกับสิ่งนี้และมีปัญหาเกี่ยวกับหลายวิธีที่ต้องเลื่อนเช่นกัน (ฉันใช้ 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:เพียงแค่บันทึกด้านข้างคุณต้องมีโมดอลเหล่านี้แยกกันโมดอลรองไม่สามารถซ้อนในอันแรกได้ในขณะที่คุณซ่อนโมดอลแรก

นี่คือตัวอย่างเต็มตามตัวอย่างโมดอล bootstrap:

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

ลองทำตามนี้

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

หากคุณต้องการปิดโมดอลที่เปิดไว้ก่อนหน้านี้ในขณะที่เปิดโมดอลใหม่คุณต้องทำจาก javascript / jquery โดยก่อนปิดโมดอลที่เปิดอยู่ในปัจจุบันจากนั้นให้ระยะหมดเวลา 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');
        }
    },
});

Working Fiddle สำหรับการอ้างอิงJSFiddle: 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:ใช้ 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

รหัสนี้ปิดโมดอลเปิดเปิดโมดอลใหม่ แต่ในที่สุดโมดอลใหม่จะปิด

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

เพียงคัดลอกและวางโค้ดนี้และคุณสามารถทดลองกับสองโมดอลได้ โมดอลที่สองเปิดอยู่หลังจากปิดอันแรก:

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

ไชโย!