Bootstrap 模态框未正确填充

Question

所以我有一些模式应该根据它们引用的内容框有自己的内容。当用户单击放大按钮（看起来像灰色 'X' 的按钮）时，模态框应该弹出其中包含该信息，但每个模态框都只包含第一个模态框信息。我相信我已经将它缩小到 javascript 但我不确定它有什么问题，因为我认为它应该可以工作。无论如何，这是包含所有代码的代码笔，包括 css、html 和 javascript 或下面的 javascript 代码。您还可以通过单击视图下拉按钮并选择地图或 table 来更改第一个和第三个模式中的内容。谢谢

代码笔：http://codepen.io/MarkBond/pen/VLpXjB

JAVASCRIPT:

        // Get all list options
    var listOptions = $('ul.dropdown-menu > li > a');

    // Attach "click" event
    listOptions.click(function(ev) {
      var href = $(this).attr('href');
      var divToShow = $(href);

      // Find divs with content
      var contentDivs = divToShow.parent().find('.content');

      // Toggle "active" classes
      contentDivs.removeClass('active');
      divToShow.addClass('active');
    });

//THIS IS WHERE I THINK THE START OF THE PROBLEM IS
    $(document).ready(function() {

      $('[data-target="#enlargeElementModal"]').on('click', function() {
        $('#enlargeElementModal .modal-body').html($('.content.active').html());
      });
      $('[data-target="#enlargeStrategyModal"]').on('click', function() {
        $('#enlargeStrategyModal .modal-body').html($('.content.active').html());
      });

      $('[data-target="#enlargeVariableModal"]').on('click', function() {
        $('#enlargeVariableModal .modal-body').html($('.content.active').html());
      });
    });
//END OF WHERE I THINK PROBLEM IS

Answer 1

您的问题出在这部分$('.content.active').html()。该代码片段找到第一个这样的 DOM 元素，它恰好更接近第一个 "Enlarge" 按钮。您必须更准确地选择选择器。例如，为 .ibox-content div 提供 ID，并将选择器更改为 $('#ibox-1 .content.active').html().

这是您修改过的笔 - http://codepen.io/h8every1/pen/oXZVey。中间部分还有一些问题，希望大家自己解决。

Bootstrap 模态框未正确填充

Bootstrap modals aren't populating properly

html

javascript

css

twitter-bootstrap

bootstrap-modal