Question

很抱歉，如果已经回答。我目前正在一个新兵训练营里学习Bootstrap，而我的模式并没有弹出。我不知道为什么会这样。

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" 
aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Pokemon!</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
        </div>
            <ul class="pokemon-list"></ul>
    </div>

这是我正在使用的Javascript。


  var $modalContainer = $('#exampleModal');

  function showModal(pokemon) {
      pokemon.name, pokemon.imageUrl, pokemon.height;
    
    var modalBody = $('.modal-body');
    var modalTitle = $('.modal-title');
      modalBody.empty();
      modalTitle.empty();
        
    var titleElement = $('<h2></h2>');
        titleElement.text('#' + pokemon.id + ' ' + pokemon.name);

    var contentElement = $('<p></p>');
        contentElement.text(pokemon.height);

    var pokemonImage = $('<img>');
        pokemonImage.attr('src', pokemon.imageUrl);
        pokemonImage.addClass('pokemon-image');
    
   

     modalBody.append(titleElement)
     modalBody.append(pokemonImage);
     modalBody.append(contentElement);
     
    }

Answer 1

如果您正在使用boostrap，为了手动显示模式，您需要运行：

$('#exampleModal').modal('show');

有关详细信息，请参见doc：

var $modalContainer;

function showModal(pokemon) {
    pokemon.name, pokemon.src, pokemon.height;

    var modalBody = $('.modal-body');
    var modalTitle = $('.modal-title');
    modalBody.empty();
    modalTitle.empty();

    var titleElement = $('<h2></h2>');
    titleElement.text('#' + pokemon.id + ' ' + pokemon.name);

    var contentElement = $('<p></p>');
    contentElement.text(pokemon.height);

    var pokemonImage = $('<img>');
    pokemonImage.attr('src', pokemon.src);
    pokemonImage.addClass('pokemon-image');



    modalBody.append(titleElement)
    modalBody.append(pokemonImage);
    modalBody.append(contentElement);

    $('#exampleModal').modal('show');

}
$(function () {
    var $modalContainer = $('#exampleModal');
    showModal(document.getElementById('pokemon'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


<img id="pokemon" name="pokname" src="pokurl">
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Pokemon!</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
</div>
<ul class="pokemon-list"></ul>
</div>

Bootstrap模态淡入淡出窗口，但不会弹出

1 个答案: