Content & Style Guide: Widgets and Pop-Ups

Includes link to Tutorials Guide
https://infoguides.rit.edu/prf.php?id=58a0f70c-7cdb-11ed-9922-0ad758b798c3

Pop-Up Content

Use this code to insert a link to trigger your pop-up:

<p><a data-target="#UniqueNameForThisPopUp (no spaces or punctuation!)" data-toggle="modal" style="cursor:pointer;color:#337ab7;font-weight:700;">Link Title</a></p>

Place this code at the end of your box's HTML:

<div class="modal fade" id="UniqueNameForThisPopUp" style="display:none;" tabindex="-25">

    <div class="modal-dialog modal-lg">

        <div class="modal-content">

            <div class="modal-header">

                <button class="close" data-dismiss="modal"

type="button"><span>×</span></button>

                <h4 class="modal-title">Title for your Pop-up Window</h4>

            </div>

            <div class="modal-body">

                <p>Content for your Pop-Up</p>
                OR
                <p><img style="border:solid 1px #c9c9c9;display:block;margin-left:auto;margin-right:auto;" src="https://imageurl.com"/></p>

            </div>

            <div class="modal-footer">

                <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>

            </div>

        </div>

    </div>

</div>

Edit this Guide

Log into Dashboard

Use of RIT resources is reserved for current RIT students, faculty and staff for academic and teaching purposes only.
Please contact your librarian with any questions.

Facebook icon  Twitter icon  Instagram icon  YouTube icon