web-dev-qa-db-ja.com

モーダル内のボタンをクリックしてjQueryまたはJavaScriptを使用してbootstrapモーダルのデータ値を取得する方法は？

モーダル内のボタンをクリックすると、bootstrapモーダルのデータ値を取得します。ここに私のモーダルがあります-

<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 class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                    <h4 class="modal-title" id="myModalLabel">Cancel</h4>
                                </div>
                                <div class="modal-body"> 
                                    Are you sure you want to cancel this?
                                </div>
                                <div class="modal-footer">
                                    <button type="button" id="savebutton" class="btn btn-success" >Yes</button>  
                                    <button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
                                </div>
                            </div>
                        </div> 
                    </div>

そして、これがデータをモーダルに渡す方法です-

更新-

    <button data-target='#myModal' id='link' data-toggle='modal' data-id="1"  class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel 1</button>
    <button data-target='#myModal' id='link' data-toggle='modal' data-id="2"  class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel 2</button>
    <button data-target='#myModal' id='link' data-toggle='modal' data-id="3"  class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel 3</button>
    ...
    ..
    .
    <button data-target='#myModal' id='link' data-toggle='modal' data-id="n"  class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel n</button>

Modalは多くのボタンのいずれからでも呼び出すことができ、関係するボタンのデータIDのみを取得する必要があります。例-「キャンセル1」ボタンをクリックした場合、モーダルの「はい」ボタンをクリックした後、data-idを1として取得する必要があります。

JQueryまたはjavascriptを使用して、このモーダルで「はい」ボタンをクリックすると1234である「id」フィールドのモーダルデータ値を取得したい。

javascriptjquerytwitter-bootstrapbootstrap-modal
6
gauravparmar

私はあなたのフィドルを変更しました： http://jsfiddle.net/exr00e0d/

あなたはhrefをとっていました。その代わりに、私はターゲット（モーダル）を取った。

$('.cancel_modal').click(function() {
   //alert('called');
    // we want to copy the 'id' from the button to the modal
    var href = $(this).data('target');
    var id = $(this).data('id');

    // since the value of href is what we want, so I just did it like so
    alert(href);
    // used it as the selector for the modal
    alert(id);
    $(href).data('id', id);
});
8
Abdul Rehman Sayed

JQuery

$('#savebutton').click(function() {
    var id = $('#link').data('id');
    // if for some reason, the code above doesn't work,
    // $('#link').attr('data-id');
    console.log(id);
});

編集：

your jsfiddle を見る

$('#link').click(function() {
    // we want to copy the 'id' from the button to the modal
    var target = $(this).attr('target');
    var id = $(this).data('id');

    $(target).data('id', id);
});

$('#savebutton').click(function() {
    // now we grab it from the modal
    var id = $('#addBookDialog').data('id');

    console.log(id);
});
1
Craftein

これを試して

function getid() {
var id=document.getElementById('savebutton').getAttribute("data-‌​id");
return id;
}

<button type="button" id="savebutton" class="btn btn-success" onclick="getid()" >Yes</button>
1
user1844933