2016-12-18 34 views
2

ajaxを使用してモーダルを表示するのに助けが必要です。私はすでにコードを持っていますが、ボタンをクリックするとモーダルが表示されません。フェーディングは表示されますが、モーダルは表示されません。ボタンがクリックされたときモーダルが表示されない

はここに私のボタンと

<button class="btnView" data-target="#myModal" role="button">View Details</button> 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     </div> 
    </div> 
</div> 

の下でのモーダルで、私はview_modal.php内部で何を取得し、モーダル・コンテンツのクラスの中にそれを置くこのスクリプトを持っています。

$(".btnView").click(function(){ 
     if(ID!=""){ 
       $.ajax 
       ({ 
       type: "POST", 
       url: "view_modal.php", 
       cache: false, 
       success: function(html) 
       { 
        $(".modal-content").html(html); 
       } 
       }); 
     }else{ 
      $('.modal-content').html("<div class='modal-header'><button type='button' class='close' id='btnClosemodal' data-dismiss='modal' aria-hidden='true'>&times;</button><h4 class='modal-title' id='myModalLabel'>Select Record</h4></div><br/><center>Please select a record first before clicking view button.</center><br/>"); 
     } 
     $('.modal').modal('show'); 
    }); 

これはview_modal.phpここ

<div class="modal-header"> 
    <button type="button" id="btnClosemodal" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
    <h4 class="modal-title" id="myModalLabel">View Details</h4> 
</div> 

<div class="modal-body"> 
    <div id="form1" method="post"> 
     <div class="modal-body"> 
      <p>Title:</p> 
      <p>Message:</p> 
     </div> 
     <div class="modal-footer"> 
      <button id="btnClosemodal" data-dismiss="modal" class="btn btn-danger">CLOSE</button> 
     </div> 
    </div> 
</div> 
+0

あなたドン」を表示するためのHTMLで、

<button id="btnAdd" data-toggle="modal" data-target="#myModal" class="btn-group-sm btn-primary" value="Search"><span class="glyphicon glyphicon-plus">Add New</span></button> 

ですあなたのポストやタグであなたが使っているモーダルの種類を説明してください。 JavaScriptプラグイン? –

+0

あなたのモーダルが新しいhtmlで更新されているかどうかを確認してください。もしあなたのcss.Logicに何か問題があるよりも肯定的であれば – Sameer

+0

これはブートストラップでしょうか? '$( '。modal')。modal();'( 'show'なし)は動作しますか?開発ツールでソースを表示すると、あなたのコンテンツはモーダルに追加されていますか? –

答えて

-1

ボタンこれはモーダル、

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <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="myModalLabel">Modal title</h4> 
       </div> 
       <div class="modal-body"> 
        Name: <input type="text" id="txtName" name="name" /> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" id="submit" class="btn btn-primary">Save changes</button> 
       </div> 
      </div> 
     </div> 
    </div> 
関連する問題