ブートストラップを使用してモーダルを実装する方法は？

Question

私のhtmlファイルには、ブートストラップのコンセプトという概念が使用されています。モーダルでは、保存をクリックした後にデータを入力しています。このデータは、モーダルが呼び出されるhtmlページに表示されます。どの機能を使用するかによって、このデータをhtmlページに含めるか表示することができます。

Answer 1

ここで基本的な考え方があるあなたの参照

の作業Plunkerですあなたはモーダルバックからオブジェクトを渡すことができますアレックス・マクミラン@

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

Answer 2

親ページからのポップアップを表示するために、コード内で使用されるブートストラップ「モーダル」スタイルクラスが想定されています。ここでは、JavaScript/jqueryは同じページ内のmodal divから他のdivにコンテンツを更新するのに役立ちます。

例：ブートストラップとjQueryを使ってコンテンツhttps://jsfiddle.net/AMVijay/f46qLn8L/1/

HTML：

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