This project serves to load Bootstrap modals and modals's content from separate files using javascript vanilla. See preview.
-
Import
Bootstrap (v5.0 ++)
css
andjavascript
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
-
Clone this repo
git clone https://github.com/glappsmobile/open-modal-bootstrap.git
-
import
scripts/configModals.js
to your project<script src="path/to/configModals.js"></script>
After importing Bootstrap
and scripts/configModals.js
, you'll need 3 things:
- A tag to serve as a button
- A html file with the modal (php file that echoes a html inside a string works too)
- A html file with the modal's content (php file that echoes a html inside a string works too)
The tag can be anything (<a>
, <span>
, <button>
...), but it needs 4 specific props in order to work:
data-bs-toggle="modal" //Tells the script that this is a open-modal button
modal="path/to/modal" //Where the modal file is located
content="path/to/modal-content" //Where the modal's content file is located
title="Cool Title" //The modal's title
It'll look something like this:
<button
data-bs-toggle="modal"
modal="modals/my-modal.html"
content="forms/my-subscribe-form.html"
title="Subscribe"
class="btn btn-primary"
>
Open Modal
</button>
It can be any bootstrap v5 modal:
<div class="modal fade" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">YOUR MODAL TITLE WILL BE SHOWN HERE</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- YOUR MODAL CONTENT WILL BE SHOWN HERE -->
</div>
</div>
</div>
</div>
The content can be anything in html, it can be a form, an image, a video or anything else. Example:
<form>
<div class="form-group">
<span>Your email:</span>
<input type="text" name="email" class="form-control" placeholder="Insert your email">
</div>
</form>
<button class="btn btn-primary mt-3" onclick="alert('click')">Click me</button>
After following all those steps, you can have modals and contents in multiple files and easily rendering them when clicking on the button. Try it yourself
See the open issues for a list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Distributed under the MIT License. See LICENSE
for more information.
Glauco Villas Boas - glappsmobile@gmail.com.com
Project Link: https://github.com/glappsmobile/open-modal-bootstrap