Black Sun Plc: Modal

Modal

A modal displays content that temporarily blocks interactions with the main view of a site.

Example # Basic

HTML

<button class="open-modal-btn" data-behavior-is="modal-btn" data-modal-id="basicModal">Basic modal</button>

<div class="bs-modal-overlay">
    <div class="bs-modal-wrapper" id="basicModal">
        <button class="close-modal-btn"></button>
        <header class="bs-modal-header">
            <h3>Modal heading</h3>
        </header>
        <section class="bs-modal-section">
            <p>Proin elit arcu, rutrum commodo...</p>
        </section>
    </div>
</div>

Example # Fullscreen

<button class="open-modal-btn" data-behavior-is="modal-btn" data-modal-id="fullScreenModal">Fullscreen modal</button>

JavaScript function is same.

Add class "bs-modal-wrapper--fullscreen" to <div class="bs-modal-wrapper">

<div id="fullScreenModal" class="bs-modal-wrapper bs-modal-wrapper--fullscreen">

Example # Scroll

<button class="open-modal-btn" data-behavior-is="modal-btn" data-modal-id="scrollModal">Content scroll modal</button>

JavaScript function is same.

Add class "bs-modal-wrapper--scroll" to <div class="bs-modal-wrapper">

<div id="scrollModal" class="bs-modal-wrapper bs-modal-wrapper--scroll">

Example # Video

HTML

<button class="open-modal-btn" data-behavior-is="modal-btn" data-modal-id="videoPopup">Video Modal</button>

<div class="bs-modal-overlay">
    <div class="bs-modal-wrapper bs-modal-wrapper--video" id="videoPopup" data-has-video="true">
        <button class="close-modal-btn"></button>
        <div class="bs-media-wrapper">
            <div class="bs-media">
                <video playsinline="" controls="">
                    <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4" />
                </video>
            </div>
        </div>
    </div>
</div>

Attribute data-has-video "true" is using for stop video when we close the modal.

Here you can also use above aspect ratio classes.

<div class="bs-media aspect-4-3">