Modal guide for billboard framework

Hi everyone
To use Modal, just connect the billboard library (CSS & JS) to the web page first (CDN or Local) And then create your modal using the code below.

You can find files and CDN billboard framework in following link.

  • Recommended connecting the Font Awesome library to the web page to display the fonts icons.

Modal with tow buttom

<div class="bmodal" id="modal" role="dialog" tabindex="-1"  aria-labelledby="" aria-hidden="true">
<div class="bmodal-aria-xs">
<div class="bmodal-content">
<div class="bmodal-title"><h4>Heading</h4></div>
<div class="bmodal-content"><p>Woohoo, you're reading this text in a modal!</p></div>
<div class="bmodal-footer"><button class="btn-nobg-dark btn-outline close-modal-btn">
Close
</button><button class="btn-nobg-dark ">
More
</button></div>
</div>
</div>

</div>
<button class="btn-nobg-dark btn-outline btn-modal" data-target="#modal">Modal</button>

Modal with scrollable content

<div class="bmodal" id="modal3" role="dialog" tabindex="-1"  aria-labelledby="" aria-hidden="true">
<div class="bmodal-aria-xs">
<div class="bmodal-content ">
<div class="bmodal-title"><h4>Heading</h4></div>
<div class="bmodal-content bmodal-scrollable"><p>h-shadow - Required. Specifies a pixel value for the horizontal shadow. Negative values place the shadow to the left of the image.
v-shadow - Required. Specifies a pixel value for the vertical shadow. Negative values place the shadow above the image.

blur - Optional. This is the third value, and must be in pixels. Adds a blur effect to the shadow. A larger value will create more blur (the shadow becomes bigger and lighter). Negative values are not allowed. If no value is specified, 0 is used (the shadow's edge is sharp).</p></div>
<div class="bmodal-footer"><button class="btn-nobg-dark btn-outline close-modal-btn">
Close
</button><button class="btn-nobg-dark ">
More
</button></div>
</div>
</div>

</div>
<button class="btn-nobg-dark btn-outline btn-modal" data-target="#modal3">Scrollable Modal</button>
Amir Mahmoud Mirzargar

Written by

Founder & developer billboard framework , CEO https://thebravo.cc

elbillboard

A free HTML, CSS , JS framework

More From Medium

More on Web Development from elbillboard

More on Web Development from elbillboard

More on Web Development from elbillboard

Radio Button guide for billboard framework

More on Elbillboard from elbillboard

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade