Avatar of MikeCombe
MikeCombe
Flag 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.css
#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;}


default.aspx
<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) {
            e.preventDefault();
            var link = $(this).attr("href");
            $.modal("<iframe src='" + link + "' width='760px' height='540'></iframe>");
        });

    });
</script>



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>
modal.jpg
CSSJavaScriptjQuery

Avatar of undefined
Last Comment
MikeCombe

8/22/2022 - Mon
LZ1

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
MikeCombe

ASKER
sure...

www.debikarmann.com

click on the "My Story" RED BUTTON under the picture
LZ1

Ok, it looks like it's being added inline to the element.

You may need to modify the javascript in order to fix that
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
MikeCombe

ASKER
Thanks for the reply.
Unfortunately, it more of a comment rather that a solution.
LZ1

Try this for your on page call

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

Open in new window

ASKER CERTIFIED SOLUTION
MikeCombe

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
MikeCombe

ASKER
no solution provided
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.