如何使用bootstrap實現模態？

Question

我正在使用模態 bootstrap的概念在我的html文件中。在模態中，我在輸入數據後點擊保存，這個數據應該顯示在調用模態的html頁面中。通過使用哪些功能，我可以在html頁面中包含或顯示這些數據。

Answer 1

這裏的工作Plunker供您參考

的基本思想是你可以傳遞一個模態對象以與close()如父控制器然後接着

$uibModalInstance.close($ctrl.modal); 

打開模態控制器，可以按如下

modalInstance.result.then(function(modal) { 
    $ctrl.modal = modal; 
}, function() { 
    $log.info('Modal dismissed at: ' + new Date()); 
}); 

Answer 2

我假設代碼中使用的引導「模式」風格類來顯示從父頁面彈出。在這裏，JavaScript/jquery將有助於將模態div中的內容更新到同一頁面中的其他div。

例：https://jsfiddle.net/AMVijay/f46qLn8L/1/

HTML內容與引導和JQuery：

<form> 
    <div class="form-group"> 
    <label for="inputName" class="col-sm-2 control-label">Name</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" id="inputName" placeholder="Name" disabled> 
    </div> 
    </div> 
    <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <!-- Button trigger modal --> 
     <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button> 
    </div> 
    </div> 
</form> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <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" id="gridSystemModalLabel">Modal Title</h4> 
     </div> 
     <div class="modal-body"> 
     <div class="row"> 
      <div class="col-md-4"> 
      <input type="text" class="form-control" id="inputFirstName" placeholder="First Name" /> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-4"> 
      <input type="text" class="form-control" id="inputLastName" placeholder="Last Name" /> 
      </div> 
     </div> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button id="modalSaveButton" type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 
<!-- /.modal --> 

Java腳本：

$(document).ready(function() { 
    $("#modalSaveButton").click(function() { 
    var fullName = $("#inputFirstName").val() + " " + $("#inputLastName").val(); 
    console.log("Full Name :: " + fullName); 
    $("#inputName").val(fullName); 
    $('#myModal').modal('toggle'); 
    }); 
});