如何將動態內容添加到引導模式上點擊鏈接-jquery/JS

Question

我點擊了鏈接，顯示引導模式。不過，我需要根據應用的條件顯示模態中的動態內容。

JS：

 if (success) { 
     $("#basicModal").modal('show').html("success"); //doesnt work 
    }else if (error){ 
     $("#basicModal").modal('show').html("error"); //something like this, but doesnt work 
    } 

下面是HTML：

<a class="button-link" data-toggle="modal" data-target="#basicModal">click to test</a> 

    //bootstrap modal 

    <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button> 
        <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
        </div> 
        <div class="modal-body"> 
         <h3>Modal Body</h3> 
        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         <button type="button" class="btn btn-primary">Save changes</button> 
       </div> 
      </div> 
      </div> 
     </div> 

任何想法如何實現這一目標？謝謝！！

Answer 1

您可以使用下面的事件bootstrap的追加動態內容：

DEMO//change value of success to true or false to test the scenarios

if (success) { 
     $("#basicModal").on("shown.bs.modal", function() { //Tell what to do on modal open 
      $(this).find('.modal-body').append('success') 
     }).modal('show'); //open the modal once done 
}else if (error){ 
     $("#basicModal").on("shown.bs.modal", function() { 
      $(this).find('.modal-body').append('fail') 
     }).modal('show'); 
} 

如果你想清楚一切，將其添加爲新的內容就用html代替append像下面那樣

$(this).find('.modal-body').html('success') 

Answer 2

在bootstrap中創建模態可能非常煩人。這就是爲什麼我讓BootboxJS（http://bootboxjs.com/）做到這一點。從這裏下載：https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js。您可以隨時與HTML代替message和title

bootbox.dialog({ 
    message: "I am a custom dialog", 
    title: "Custom title", 
    buttons: { 
    success: { 
     label: "Success!", 
     className: "btn-success", 
     callback: function() { 
     Example.show("great success"); 
     } 
    }, 
    danger: { 
     label: "Danger!", 
     className: "btn-danger", 
     callback: function() { 
     Example.show("uh oh, look out!"); 
     } 
    }, 
    main: { 
     label: "Click ME!", 
     className: "btn-primary", 
     callback: function() { 
     Example.show("Primary button"); 
     } 
    } 
    } 
});