cari

Rumah  >  Soal Jawab  >  teks badan

Kotak modal Bootstrap tidak boleh ditutup apabila mengklik butang "x" atau "tutup".

Apabila mengklik untuk membuka modal, modal muncul dengan baik dan butang tutup menunjukkan tetikus saya melayang di atasnya, tetapi apabila diklik tiada apa yang berlaku dan modal tetap terbuka. Adakah sesiapa pernah menghadapi/menyelesaikan masalah ini sebelum ini? Apa yang saya lihat di sini ialah menambah "data-bs-dismiss" tetapi itu tidak mempunyai kesan pada skema. Saya baru dalam bootstrap jadi sebarang dan semua bantuan akan sangat dihargai! Kod adalah seperti berikut, pautan ke kod penuh -

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name= "viewport" content ="width=device-width, initial-scale=1">
    <title>Pokedex</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="./CSS/styles.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <script src="js/scripts.js" defer></script>

  </head>
  <body>
    

    <div class="pokedex">
      <h1 class="pokemon-header">Pokedex</h1>
      <ul class="pokemon-list list-group"></ul></div>
      
      <div class="modal" id="modal-container" tabindex="-1" role="dialog" aria-labelledby="modal-container" aria-modal="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h2 class="modal-title"></h2>
              <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>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>  
      <script src="js/promise-polyfill.js"></script>
      <script src="js/fetch-polyfill.js"></script>
    </body>
</html>

P粉809110129P粉809110129240 hari yang lalu439

membalas semua(1)saya akan balas

  • P粉968008175

    P粉9680081752024-03-30 23:04:31

    Ada beberapa soalan.

    Mari kita mulakan dengan cara mencipta butang cucuk oren. 

    function addListItem(pokemon) {
    let listItem = $('
  • ');
    let button = $('');
    listItem.append(button);
    pokemonListElement.append(listItem);
    button.on('click', function(){
      showDetails(pokemon);
    });
  }

    Ini nampak ok...tetapi: 

    let button = $('');

    Lihatlah data target="#modal-container. Terdapat tanda sempang yang hilang, sebaliknya ini 

    data target="#modal-container"

    Ia sepatutnya kelihatan seperti ini: 

    data-target="#modal-container"

    Seterusnya, anda tidak perlu memasukkan baris ini dalam fungsi showDetailsModal(pokemon) anda: 

    modalContainer.classList.add('show');

    data-target 和 data-toggle akan memperkenalkan anda kepada bahagian ini.

    Akhir sekali, CSS anda nampaknya meletakkan latar belakang modal di atas modal. Tukar ini: 

    #modal-container {
    ...
    z-index: 999;
    ...
}
    Tukar

    kepada sesuatu yang lain (cth., 1051, atau anda boleh mengalih keluarnya dan biarkan Bootstrap mengendalikannya untuk anda), kerana latar belakang z-index ialah 1040.

    balas
    0
  • Batalbalas