#Modals

A simple modal to put some pop-up content

Modals are useful to include any type of content. They can even be used to put a form, an image, a video or the content from another website.

<!-- Modal begins -->
<div class="be-modal" id="be-modal">
    <div class="be-modal-content be-width-20 be-bg-white">
    <p>Lorem ipsum dolor sit amet...</p>
    <a href="#"><span class="be-btn-close"></span></a> 
    </div>
</div>
<!-- End of Modal -->

Please note tha by default the modals does not have a background color, so you have to include a class to have it. The default widht is 500px unless otherwise specified. Plase click here to see a modal with not background color.

Message

Like modals, messages are pop up styled windows to show relevant information. Message are also configurable. Please click here to open a message.

The Message is more intended to include an informative text for which it has a header.

        <div class="be-msg" id="be-msg">
            <div class="be-msg-content">
                <div class="be-msg-title">I am a Message</div>
            <p>Lorem ipsum dolor sit amet...</p>
            <a href="#"><span class="be-btn-close"></span></a> 
            </div>
        </div>

I am a Message

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.

I am a Message

#Modals

A simple modal to put some pop-up content

When someone tells you that beCSS exists