Я использую squarespaceModal с этого сайта

Я хотел бы знать, возможно ли передать идентификатор в код модального? Это кнопка, которая вызывает модал:

<div class="center">
    <button id="<?php echo $i; ?>" data-toggle="modal" data-target="#squarespaceModal" class="update_pro btn btn-primary center-block">
        update
    </button>
</div>

Это первая строка модала:

<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
2
David Dubois 29 Авг 2017 в 09:05

3 ответа

Лучший ответ

Нажав на кнопку, установите требуемое значение в полях ввода модальных значений, а затем отобразите модальное значение, используя приведенный ниже код.

$(".update_pro").click(function () {
    $('#txtYourTexbBoxWithinModal').val($(this).data('id')); // or something eslse.
    $('#squarespaceModal').modal('show');
});

Если возникла проблема с отображением модального, то удалите

данный целевой = « # squarespaceModal »

Cheeerssss

1
Altaf Khokhar 29 Авг 2017 в 06:21

Здесь вы найдете решение https://jsfiddle.net/32jsq6aL/

$('button[data-toggle="modal"]').click(function(){
  $($(this).data('target')).attr('btn-id', $(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center"> 
  <button id="test 1" data-toggle="modal" data-target="#squarespaceModal" class="update_pro btn btn-primary center-block">update</button>
</div>

<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">

</div>

OnClick на button, получите data-target и прикрепите атрибут btn-id как button id к целевому modal.

Надеюсь, что это поможет вам.

0
Shiladitya 29 Авг 2017 в 06:13

Это просто стандартный загрузочный модал. Я не вижу в этом ничего особенного. Поэтому у вас есть все события, которые вы хотели бы получить из модального окна.

Таким образом, вы «можете» написать событие, которое будет перехвачено при каждом открытии модального окна.

$(function() {
   $('#myModal').on('shown.bs.modal', function() {
    alert($(this).attr('id'))
   });

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

<button id="myButton" data-target="#myModal" data-toggle="modal" class="btn btn-primary">Open</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" id="myModal">
  <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="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        This is my modal body
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
2
Nico 29 Авг 2017 в 06:16