如何从Vanilla Javascript打开Boostrap 3模式框

我试着像这样打开模式框

window.getElementById("modal-box-click-counter").showModal();

及

这就是我试图开始工作的全部脚本：

function clickCounter() {
  var clicks;

  function loadClicks() {
    clicks = sessionStorage.getItem("clickcount");
  }

  function setClicks() {
    sessionStorage.setItem("clickcount", clicks);
  }

  function init() {
    loadClicks();

    if (clicks >= 4) {
      console.log("WORKING " + clicks);

      // I WANT THIS TO WORK.
      $("#modal-box-click-counter").modal("show");

    } else {
      clicks++;
      setClicks();
      console.log(clicks);
    }
  }

  if (typeof Storage !== "undefined") {
    window.addEventListener("click", init);
  } else {
    console.log("Sorry, your browser does not support web storage...");
  }
}

window.addEventListener("load", clickCounter);

---

但我不能让它工作。我已经按照正确的顺序在函数中加载了JQuery和Bootstrap。

如果您没有egde案例，您可以简单地使用官方的Bootstrap示例：

是的，但该链接上没有普通的Javascript，只有JQuery。好的，也许这个答案可以帮助您：

function clickCounter() {
  var clicks;

  function loadClicks() {
    clicks = sessionStorage.getItem("clickcount");
  }

  function setClicks() {
    sessionStorage.setItem("clickcount", clicks);
  }

  function init() {
    loadClicks();

    if (clicks >= 4) {
      console.log("WORKING " + clicks);

      // I WANT THIS TO WORK.
      $("#modal-box-click-counter").modal("show");

    } else {
      clicks++;
      setClicks();
      console.log(clicks);
    }
  }

  if (typeof Storage !== "undefined") {
    window.addEventListener("click", init);
  } else {
    console.log("Sorry, your browser does not support web storage...");
  }
}

window.addEventListener("load", clickCounter);