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

Question

我的目标是这个:

1. 当单击 map 上的标记时，我使用 Javascript 显示按钮
2. 当按钮显示时，如果用户点击它，页面上就会出现一个模式。

我遇到的问题: 模式根本不显示。

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

JavaScript 文件名为:interact-version3.js

我的模态 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>