How to change width and height of Modalbox jquery popup

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:

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>
License & Download ModalBox
Subscribe for our monthly newsletter for updated articles and useful code scripts.

Share It

comments powered by Disqus
Chat With Us Close
Leave Message