Question

我有一个包含动态生成的项目列表的页面。每个项目都有按钮切换模态窗口，其中包含更多信息但不显示模态。模态放在正文标记后面：

<div class="modal fade" id="auto9" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-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">Something</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="auto16" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-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">Something</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>

按钮是：

<button class="btn btn-default" data-toggle="modal" data-target="#auto9" type="button">Подробнее</button></p>
<button class="btn btn-default" data-toggle="modal" data-target="#auto16" type="button">Подробнее</button></p>

如果我只在html体内放置按钮和模态，一切正常。有什么问题？

Answer 1

以下是我的一个项目中的一步一步实施，希望它会有所帮助。

1 - 假设它是你的List，里面有按钮（MVC Razor视图示例）。

@foreach (var list in ListCollection)
 {                            
  <button type="button" class="btn btn-xs  btn-primary" data-toggle="modal" data-target="#exampleModal" data-id="@list.ID> Details </button>
 }

2 - 这里我已经将data-id放到每个按钮上，为列表中的这个按钮打开一个模态。

3 - 每个按钮将使用脚本（下面的脚本）打开包含更多信息的模态。

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <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="exampleModalLabel">Title Here</h4>
            </div>
            <div class="modal-body">
              //Put here more details of the item, by Ajax call or any thing you like
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

4 - 现在脚本部分

$(document).ready(function () {
        $('#exampleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);//Button which is clicked
            var clickedButtonId= button.data('Id');//Get id of the button

            var modal = $(this);
            modal.find('.modal-body').text(clickedButtonId);
//Id of the clicked button which i have put inside the modal-body div class or put info here using ajax call for the button that button.

//Ajax call to get the more details of clicked button in the list.

            $.ajax({
                url: "URL",
                type: "POST",
                data: JSON.stringify({ id: clickedButtonId}),
                dataType: 'JSON',
                contentType: "application/json",
                success: function (response) {
                    modal.find('.modal-body').text(response);//Put here more info using ajax
                }
                  ,
                error: function () {

                }
            });

        })

    });

动态创建的bootstrap3模态不起作用

1 个答案: