如何使用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'); 
    }); 
});