弹出模态的动态种群

时间:2016-07-04 09:58:59

标签: javascript jquery jsp servlets

我有多个类似按钮的元素可以打开一个模态弹出窗口。我尝试根据用于打开模态的元素动态填充它。我正在使用JSP和servlets。我也想了解如何向click函数发送参数。

$('.btn-primary').bind('click', function(event) {
    modal.style.display = "block";
});

<div id="myModal" class="modal" style="z-index:4">
             <div class="modal-content">
                  <div class="modal-header">
                       <span class="close">×</span>
                       <h4>Submitted List</h4>
                  </div>
                  <div class="modal-body">
                  </div>
               </div>
        </div>

1 个答案:

答案 0 :(得分:2)

使用数据属性传递数据

<button class="btn-primary" data-content="this will be displayed in the modal body">
$('.btn-primary').bind('click', function(e) {
    e.preventDefault();
    var content = $(this).attr('data-content');
    $('#myModal').find('.modal-body').html(content);
    $('#myModal').modal('show');
});

或通过将id传递给servlet来使用ajax

  <button class="btn-primary" data-id="1">
  $('.btn-primary').bind('click', function(e) {
        e.preventDefault();
        var id= $(this).attr('data-id');
        $.ajax({url:'path/to/servlet',data:{id:id},success:function(data){
            $('#myModal').find('.modal-body').html(data);
             $('#myModal').modal('show');
        }})

    });