Link to home
Start Free TrialLog in
Avatar of MikeCombe
MikeCombeFlag for United States of America

asked on

How to remove scrollbars from Modal Box & inside container ?

I have a modal popover box.
I would like to remove the scrollbars from both the outside modal box AND the inside container (which is an iframe).
Is that possible ?
Is it in the css settings ?

 I would prefer to set my box & container sizes by hard code, rather than the automatic use of scroll bars.

Reference the attached picture for example.

Here's the code:

#basic-modal-content {display:none;}
/* Overlay */
#simplemodal-overlay {background-color:#000; cursor:wait;}
/* Container */
#simplemodal-container {height:460px; width:500px; color:#bbb; background-color:#c3cfcd; border:1px solid #444; padding:6px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; color:#bbb; display:block; font-size:36px; margin-bottom:6px; padding:4px 6px 6px;}
#simplemodal-container a {color:White;}
#simplemodal-container a.modalCloseImg {background:url(../img/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}

<link type='text/css' href='modal/basic/css/basic.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='modal/basic/js/jquery.js'></script>
<script type='text/javascript' src='modal/basic/js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='modal/basic/js/basic.js'></script>
<script type="text/javascript" language="javascript">
    $(function () {
        $(".basic2").click(function (e) {
            var link = $(this).attr("href");
            $.modal("<iframe src='" + link + "' width='760px' height='540'></iframe>");


Hyper-link in default.aspx that activates the modal box popover:
<a href="foo.htm" class="basic"><img src="images/foo.jpg" alt="foo" border="0" /></a>
Avatar of LZ1
Flag of United States of America image

If you have a live link, you can show us that way, because honestly we're not 100% sure what element is getting the scrollbars.  

Start here though by giving #simplemodal-container a property of overflow:hidden
Avatar of MikeCombe



click on the "My Story" RED BUTTON under the picture
Ok, it looks like it's being added inline to the element.

You may need to modify the javascript in order to fix that
Thanks for the reply.
Unfortunately, it more of a comment rather that a solution.
Try this for your on page call

    $(function () {
        $(".basic2").click(function (e) {
            var link = $(this).attr("href");
            $.modal("<iframe src='" + link + "' scrollbars='no' width='760px' height='540'></iframe>"),

Open in new window

Avatar of MikeCombe
Flag of United States of America image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
no solution provided