从Javascript文件调用的Bootstrap Modal不起作用

Question

我的目标是这个

1. 当在地图上单击标记时，我使用Javascript显示按钮
2. 显示按钮时，如果用户单击它，则页面上应显示一个模式。

我遇到的问题： 模态根本不显示。

页面位于此处： http://p4547.phpnet.org/bikes/reservation.html

JavaScript文件称为：interact-version3.js

我的Modal HTML代码：

<!-- Modal -->
  <div aria-hidden="true" aria-labelledby="exampleModalLongTitle" class="modal fade" id="bookingmodal" role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Réservation</h5><button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
          <div class="guide">
            <div class="row item">
              <div class="col-md-12 order-md-2">
                <h2 class="item-heading">Signature. <span class="text-muted">Signez pour valider votre réservation.</span></h2>
                <p class="lead">Titre<br></p>
                <p></p>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" data-dismiss="modal" type="button">Fermer</button>
        </div>
      </div>
    </div>
  </div>

这是Javascript部分：

onMarkerClick(arg) {
  // Récupération du marker concerné
      let marker = arg.target;
  // Récupération des infos
      let info = marker.options.jcdecauxInfo;
      let name = info.name;
      let lowerName = name.toLowerCase();
      let address = info.address;
      let statusStation = info.status;
      let statusStationFr = statusStation.replace('OPEN', '<i class="fas fa-lock-open text-success"></i>&nbsp;&nbsp; Station Ouverte').replace('CLOSED', '<i class="fas fa-lock text-danger"></i>&nbsp;&nbsp; Station Fermée');
      let lastUpdate = info.last_update;
      let date = new Date(lastUpdate).toLocaleString();
      let availableBikes = info.available_bikes;
  // Affichage des infos de la station dans l'encart situé à droite :
      document.getElementById("name").innerHTML = `<h4 title="Adresse" class="details display-5"><i class="fas fa-map-marked-alt text-danger"></i>&nbsp;Détails de la station :</h4><div class="text-success"><h5>Station de Vélo'v</h5></div><h6>${name}</h6>`;
      document.getElementById("address").innerHTML = address;
      document.getElementById("status").innerHTML = statusStationFr;
      document.getElementById("last_update").innerHTML = `<i class="fas fa-clock"></i>&nbsp;&nbsp; Dernière mise à jour :  ` + date;
      if (availableBikes > 1) {
        document.getElementById("available_bikes").innerHTML = `<i class="fas fa-bicycle"></i>&nbsp;&nbsp;<strong>` + availableBikes + `&nbsp;vélos disponibles</strong><br>
          <br>
          <form>
          <div class="form-group row">
          <label for="lastname" class="col-sm-3 col-form-label">Nom :</label>
          <div class="col-sm-9">
          <input type="text" class="form-control" id="lastname" placeholder="Votre Nom">
          </div>
          </div>
          <div class="form-group row">
          <label for="firstname" class="col-sm-3 col-form-label">Prénom :</label>
          <div class="col-sm-9">
          <input type="text" class="form-control" id="firstname" placeholder="Votre Prénom">
          </div>
          </div>
          <div class="form-group row">
          <div class="col-sm-12">
          <button type="submit" class="btn btn-danger" data-target="#bookingmodal" data-toggle="modal">Réserver</button>
          </div>
          </div>
          </form>`;
        }

      else if (availableBikes == 1) {
        document.getElementById("available_bikes").innerHTML = `<i class="fas fa-bicycle"></i>&nbsp;&nbsp;<strong>` + availableBikes + `&nbsp;vélo disponible</strong><br>
          <br>
          <form>
          <div class="form-group row">
          <label for="lastname" class="col-sm-3 col-form-label">Nom :</label>
          <div class="col-sm-9">
          <input type="text" class="form-control" id="lastname" placeholder="Votre Nom">
          </div>
          </div>
          <div class="form-group row">
          <label for="firstname" class="col-sm-3 col-form-label">Prénom :</label>
          <div class="col-sm-9">
          <input type="text" class="form-control" id="firstname" placeholder="Votre Prénom">
          </div>
          </div>
          <div class="form-group row">
          <div class="col-sm-12">
          <button type="submit" class="btn btn-danger" data-target="#bookingmodal" data-toggle="modal">Réserver</button>
          </div>
          </div>
          </form>
          `;
      }
      else {
        document.getElementById("available_bikes").innerHTML = `<br><br><h3>Aucun vélo disponible dans cette station</h3><br><br>`;
      }
    }

我希望你能在这件事上帮助我。

Answer 1

问题在于按钮在表单内具有显式（并且默认情况下）为submit的类型。当您单击表单时，浏览器会尝试提交表单，从而导致离开页面的导航。您可以通过将按钮更改为键入button

来防止此行为

<button type="button" ...>Réserver</button>

Answer 2

Reserver按钮位于表单内，该按钮正在提交表单并导致页面重新加载。您可以听按钮click并使用e.preventDefault阻止其为默认操作。

const button = document.querySelector('button')
button.addEventListener('click', function(e) {
    e.preventDefault();
    console.log('clicked');
})

<form action="">
  <button type="submit">Click Me</button>
</form>