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的值。

$（＆＃39;＃subjid＆＃39）。VAL（值）;

Bootstrap将数据传递给模态

3 个答案: