static.porto.acumenonline.co.nz > Features > Elements

Features / Elements / Modal & Lightbox

Modal & Lightbox

Porto - Standard Edition - Trial Expired!
Purchase PORTOSkin & other DotNetNuke Modules at Mandeeps.com

Modal

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

Lightbox

HTML Shortcode

Add Text/HTML module to the page with the below HTML content.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;</button>
                <h4 class="modal-title" id="myModalLabel">
                    Modal title</h4>
            </div>
            <div class="modal-body">
                One fine body...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    Close</button>
                <button type="button" class="btn btn-primary">
                    Save changes</button>
            </div>
        </div>
    </div>
</div>

HTML Shortcode

Add Text/HTML module to the page with the below HTML content.

<a class="img-thumbnail lightbox pull-left" href="/Portals/40/img/projects/project.jpg"
    data-plugin-options="{'type':'image'}">
    <img alt="" class="img-responsive" src="/Portals/40/img/projects/project-thumb.jpg" />
    <span class="zoom"><em class="icon icon-16 icon-white-shadowed icon-search"></em>
    </span></a>