如何在没有jQuery或bootstrap.js javascript的情况下打开Bootstrap模态? [英] How to open a Bootstrap modal without jQuery or bootstrap.js javascript?

问题描述

我正在研究VERY LIGHT调查应用程序.此应用程序在第三世界国家/地区的连接非常有限的地方运行.

I'm working on a VERY LIGHT survey application. This application runs in third world countries in locations with very limited connection.

我们发现加载时间与用户参与度成正比(对我们来说非常重要).

We found that the loading-time is proportional to user Engagement (Very important to us).

今天，我正在使用2个库-VueJS和自定义引导程序构建.我想调用一个模式.但是模态要求添加Bootstrap Javascript和jQuery.这些库几乎使加载时间翻了一番.

Today I'm using 2 libs - VueJS and a custom bootstrap build. I would like to invoke a modal. But the modal requires to add the Bootstrap Javascript and the jQuery. those libs almost doubles the loading time.

如何在不添加这两个库的情况下打开模式?

How can I open a modal without adding those two libs?

推荐答案

@uday仅CSS模式的链接是一个不错的技巧，但是如果您将#tag用于其他目的(例如，Routing& param)，可能会很尴尬通过).

@uday's link to CSS only modal is a nice trick, but might be awkward to use if you use #tag's for other purposes (eg, Routing & param passing).

因此，这是一个使用很少的JS实现非常相似的示例.我已尝试将代码段保持尽可能的小，以便轻松查看正在发生的情况.

So here is an example that uses very little JS to achieve something very similar. I've tried to keep the Snippet as small as possible so that it's easy to see what's happening.

var modal = document.querySelector(".modal");
var container = modal.querySelector(".container");

document.querySelector("button").addEventListener("click", function (e) {
  modal.classList.remove("hidden")
});

document.querySelector(".modal").addEventListener("click", function (e) {
  if (e.target !== modal && e.target !== container) return;     
  modal.classList.add("hidden");
});

.modal {
  background-color: rgba(0,0,0,0.4); /* Transparent dimmed overlay */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: table;
}

.modal.hidden {
  display: none;
}

.modal .container {
 display: table-cell;
 text-align: center;
 vertical-align: middle;
 width: 200px;
}

.modal .body {
  box-shadow: 5px 10px #888888;
  display: inline-block;
  background-color: white;
  border: 1px solid black; 
  padding: 10px;
}

<button>Show Modal</button>

<div class="modal hidden">
  <div class="container">
    <div class="body">
      <p>Click outside this box to close the modal.<p>
      <p>You could of course add a close button etc</p>
      <p>But this is left for the OP todo</p> 
    </div>
  </div>
</div>

这篇关于如何在没有jQuery或bootstrap.js javascript的情况下打开Bootstrap模态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！