Передача данных в bootstrap modal

Question

У меня есть несколько гиперссылок, каждый из которых имеет прикрепленный идентификатор. Когда я нажимаю на эту ссылку, я хочу открыть модальный (http://twitter.github.com/bootstrap/javascript.html#modals) и передать этот идентификатор модальному. Я искал в Google, но я не мог найти ничего, что могло бы мне помочь.

Это код:

<a data-toggle="modal" data-id="@book.Id" title="Add this item" class="open-AddBookDialog"></a> 

Который должен открыть:

<div class="modal hide" id="addBookDialog"> 
    <div class="modal-body"> 
     <input type="hidden" name="bookId" id="bookId" value=""/> 
    </div> 
</div> 

С помощью этой части кода:

$(document).ready(function() { 
    $(".open-AddBookDialog").click(function() { 
     $('#bookId').val($(this).data('id')); 
     $('#addBookDialog').modal('show'); 
    }); 
}); 

Однако, когда я нажимаю на гиперссылку, ничего не происходит , Когда я даю гиперссылку href = "# addBookDialog", модально открывается просто отлично, но он не содержит никаких данных.

Я последовал этому примеру: How to pass values arguments to modal.show() function in Bootstrap

(и я также попытался это: How to set the input value in a modal dialogue?)

Answer 1

Я думаю, что вы можете сделать эту работу с помощью обработчика событий .on JQuery в.

Вот скрипка, которую вы можете проверить; просто убедитесь, что вы развернете html-фрейм в скрипте настолько, насколько это возможно, чтобы просмотреть модальный.

http://jsfiddle.net/Au9tc/605/

HTML

<p>Link 1</p> 
<a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a> 

<p>&nbsp;</p> 


<p>Link 2</p> 
<a data-toggle="modal" data-id="ISBN-001122" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a> 

<div class="modal hide" id="addBookDialog"> 
<div class="modal-header"> 
    <button class="close" data-dismiss="modal">×</button> 
    <h3>Modal header</h3> 
    </div> 
    <div class="modal-body"> 
     <p>some content</p> 
     <input type="text" name="bookId" id="bookId" value=""/> 
    </div> 
</div> 

JAVASCRIPT

$(document).on("click", ".open-AddBookDialog", function() { 
    var myBookId = $(this).data('id'); 
    $(".modal-body #bookId").val(myBookId); 
    // As pointed out in comments, 
    // it is superfluous to have to manually call the modal. 
    // $('#addBookDialog').modal('show'); 
}); 

Answer 2

Вот как я реализовал это работает с кодом @ mg1075 в. Я хотел получить более общий код, чтобы не назначать классы для модальных триггерных ссылок/кнопок:

Протестировано в Twitter Bootstrap 3.0.3.

HTML

<a href="#" data-target="#my_modal" data-toggle="modal" data-id="my_id_value">Open Modal</a> 

JAVASCRIPT

$(document).ready(function() { 

    $('a[data-toggle=modal], button[data-toggle=modal]').click(function() { 

    var data_id = ''; 

    if (typeof $(this).data('id') !== 'undefined') { 

     data_id = $(this).data('id'); 
    } 

    $('#my_element_id').val(data_id); 
    }) 
}); 

Answer 3

Вот уборщик способ сделать это, если вы используете Bootstrap 3.2.0.

Ссылка HTML

<a href="#my_modal" data-toggle="modal" data-book-id="my_id_value">Open Modal</a> 

Модальные JavaScript

//triggered when modal is about to be shown 
$('#my_modal').on('show.bs.modal', function(e) { 

    //get data-id attribute of the clicked element 
    var bookId = $(e.relatedTarget).data('book-id'); 

    //populate the textbox 
    $(e.currentTarget).find('input[name="bookId"]').val(bookId); 
}); 

http://jsfiddle.net/k7FC2/

Answer 4

Если вы на загрузчике 3+, это может быть сокращен немного дальше, если с помощью Jquery.

HTML

<a href="#" data-target="#my_modal" data-toggle="modal" class="identifyingClass" data-id="my_id_value">Open Modal</a> 

<div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="my_modalLabel"> 
<div class="modal-dialog" role="dialog"> 
    <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"> 
      Modal Body 
      <input type="hidden" name="hiddenValue" id="hiddenValue" value="" /> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">No</button> 
      <button type="button" class="btn btn-primary">Yes</button> 
     </div> 
    </div> 
</div> 

Jquery

<script type="text/javascript"> 
    $(function() { 
     $(".identifyingClass").click(function() { 
      var my_id_value = $(this).data('id'); 
      $(".modal-body #hiddenValue").val(my_id_value); 
     }) 
    }); 
</script> 

Answer 5

Ваш код работал бы с правильной структурой модальный HTML.

$(function(){ 
 
    $(".open-AddBookDialog").click(function(){ 
 
    $('#bookId').val($(this).data('id')); 
 
    $("#addBookDialog").modal("show"); 
 
    }); 
 
});

<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<a data-id="@book.Id" title="Add this item" class="open-AddBookDialog">Open Modal</a> 
 

 
<div id="addBookDialog" class="modal fade" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-body"> 
 
     <input type="hidden" name="bookId" id="bookId" value=""/> 
 
     </div> 
 
    
 
    </div><!-- /.modal-content --> 
 
    </div><!-- /.modal-dialog --> 
 
</div><!-- /.modal --> 
 
</html>