• 4/8/2013
• 3853
• Modalbox jQuery Popup, jQuery Popup, Rudra Softtech

Here is an example of using custom height and width with Modalbox jQuery popup. Height and Width options do not work on the image. Modalbox calculates the ideal height of the image and uses appropriate dimensions for display.

Here are few examples:

• Inline example of Modalbox
• iFrame example of Modalbox

Code

HTML

<ul class="unstyled">
    <li><a id="inline" href="#questionmodal">Inline example of Modalbox</a></li>
    <li><a id="iframe" href="//maps.google.com/?t=h&amp;ie=UTF8&amp;ll=48.85796,2.295231&amp;spn=0.0042,0.009645&amp;z=17&amp;output=embed">
        iFrame example of Modalbox</a></li>
</ul>
<div id="questionmodal" class="hide">
    <div class="modal-header">
        <button type="button" class="close inlineclose">
            &times;</button>
        <h3>
            Simple Question</h3>
    </div>
    <div class="modal-body">
        <div class="rstquestion">
            <p>
                Which is the best Operating System in the world?</p>
            <ul>
                <li>Windows XP</li>
                <li data-anwser="correct">Windows 7</li>
                <li>Windows 8</li>
                <li>Max OS</li>
                <li>Linux</li>
            </ul>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn inlineclose">Close</a>
    </div>
</div>

Script

<link href="modal.css" rel="Stylesheet" />
<link href="modal-darktheme.css" id="modaltheme"
    rel="Stylesheet" />
<script src="modal.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#inline").modalbox({
            Type: 'inline',
            Width: 550,
            Height: 420, ShowClose : false
        });
        $("#iframe").modalbox({
            Type: 'iframe',
            Width: 700,
            Height: 600
        });
    });
</script>

Share It

• Tweet