open-modal-bootstrap

About The Project

This project serves to load Bootstrap modals and modals's content from separate files using javascript vanilla. See preview.

Built With

Installation

Import Bootstrap (v5.0 ++) css and javascript

<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>

Usage

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 button tag

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>

The modal

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>

See more examples

The content

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>

Done

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

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

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

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Glauco Villas Boas - glappsmobile@gmail.com.com

Project Link: https://github.com/glappsmobile/open-modal-bootstrap

glaucovillasboas/open-modal-bootstrap