Bootstrap 将数据传递给模态

Question

我已经阅读了 Bootsrap 文档，甚至测试了他们的“基于触发按钮的不同模式内容”示例，但这不起作用。

关于如何将数据传递给模态以便我不会在我的页面中创建多个模态的任何想法。

这是触发模态的按钮：

<a class="btn btn-danger" data-toggle="modal" data-target="#deleteSubject" data-whatever="<?= $subj_id ?>" role="button" title="Delete Subject"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>

这是模态：

<div class="modal fade" id="deleteSubject" tabindex="-1" role="dialog" aria-labelledby="deleteSubjectLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="#" method="post">
                  <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="deleteSubjectLabel">Delete Subject</h4>
                  </div>
                  <div class="modal-body">
                    <h4>Do you want to delete this subject?</h4>
                    <input type="text" id="subjid" name="subjid">
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Delete</button>
                  </div>
                </form>
            </div>
          </div>
        </div>

这是javascript：

<script>
        $('#deleteSubject').on('show.bs.modal', function (event) {
          var button = $(event.relatedTarget)
          var subjId = button.data('whatever')
          var modal = $(this)
          modal.find('.modal-body input').val(subjId)
        })
    </script>

我也试过show.bs.modal但没有任何反应。 我试图创建一个单独的脚本来测试$subj_id是否通过使用alert被读取，但它有效。

有什么想法吗？

Answer 1

您需要将代码包装在准备好的文档中，并且由于您的输入已命名并具有 id - 直接定位它，然后您也不需要查找：

<script>
    $(document).ready(function(){
        $('#deleteSubject').on('show.bs.modal', function (event) {
          var button = $(event.relatedTarget);
          var subjId = button.data('whatever');
          $('#subjid').val(subjId);
        })
    })
</script>

Answer 2

我想你忘记了模态实例上的$ ，它应该是$modal

 <script>
        $('#deleteSubject').on('show.bs.modal', function (event) {
          var button = $(event.relatedTarget)
          var subjId = button.data('whatever')
          var $modal = $(this)
          $modal.find('.modal-body input').val(subjId)
        })
    </script>

Answer 3

只需在点击事件期间使用 JavaScript / jQuery 设置 input subjid 的值。

$('#subjid').val(*value*);