2016-10-27 3 views
1

私はこの質問に関する回答を探していましたが、私が必要とする正しい答えが見つかりませんでした。 私はブートストラップでモーダルダイアログを使用していますが、私はクリックイベントでモーダルの内容を変更したいと思います。私はすべてのコンテンツを変更したいEdit informationsボタンをクリックした後クリック時にモーダルコンテンツを変更する方法(ブートストラップ)

これは私のモーダルダイアログのコード

<div class="modal fade" id="myModal{{ $user->id }}" tabindex="-1" class="closemodal" role="dialog" aria-labelledby="myModalLabel" 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"></button> 
       <h4 class="modal-title" id="myModalLabel">More About {{ $user->name }}</h4> 
      </div> 
      <div class="modal-body"> 
       <center> 
        <img src="http://bootdey.com/img/Content/user_1.jpg" name="aboutme" width="140" height="140" border="0" class="img-circle"></a> 
        <h3 class="media-heading">{{ $user->name }}<small>, USA</small></h3> 
        <span><strong>Skills: </strong></span> 
        <span class="label label-warning">HTML5/CSS</span> 
        <span class="label label-info">Adobe CS 5.5</span> 
        <span class="label label-info">Microsoft Office</span> 
        <span class="label label-success">Windows XP, Vista, 7</span> 
       </center> 
       <hr> 
        <center> 
         <p class="text-left"><strong>Email: </strong> 
          {{ $user->email }}</p> 
         <br> 
        </center> 
      </div> 
      <div class="modal-footer"> 
       <center> 
        <button type="button" class="btn btn-default" data-dismiss="modal">I've heard enough about {{ $user->name }}</button> 
        <button type="button" class="btn btn-danger" id="editUserAdmin">Edit informations</button> 
       </center> 
      </div> 
     </div> 
    </div> 
</div> 

ですが、私はいくつかの入力フィールドを挿入します。

+0

ページの更新まで、新しいもののまま、あなたは何を試してみましたか?助けが必要な場合は、あなたの質問にもっと具体的にしてください。 – Enijar

+0

こんにちは、#epowah、あなたの仕事の詳細を教えてください。 –

+1

@Enijar私は質問を編集する – Devmasta

答えて

2

あなたは機能を作成することができます。

function show_my_modal() { 
    var modal = $('#my_modal_id'); 

    // change modal content 
    modal.find('.i_want_to_change_value_of_element').val('element value'); 

    // show my modal: 
    modal.modal('show'); 
} 

そして、あなたはあなたができるボタンonClick='show_my_modal();'

0

に使用することができます。

  1. 2つのdivを作る:<div id="default"></div><div id="on_click" style="display:none"></div>をしてdefaultを隠し、クリック時にon_clickを表示イベントはEdit informationsボタンに追加されました。このように切り替えます。
  2. クリックで初期コンテンツとコンテナのdivを作成し、この操作を行います。var html = "<p>New html</p>";$(".container_div").empty().append(html);を - しかし、このように、古いコンテンツは、ダイアログから消去され、
関連する問題