MikeCombe
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/bas ic/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/basi c.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='modal/basic/js/jquery .js'></scr ipt>
<script type='text/javascript' src='modal/basic/js/jquery .simplemod al.js'></s cript>
<script type='text/javascript' src='modal/basic/js/basic. js'></scri pt>
<script type="text/javascript" language="javascript">
$(function () {
$(".basic2").click(functio n (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
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/bas
#simplemodal-container h3 {color:#84b8d9;}
default.aspx
<link type='text/css' href='modal/basic/css/basi
<script type='text/javascript' src='modal/basic/js/jquery
<script type='text/javascript' src='modal/basic/js/jquery
<script type='text/javascript' src='modal/basic/js/basic.
<script type="text/javascript" language="javascript">
$(function () {
$(".basic2").click(functio
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
ASKER
Ok, it looks like it's being added inline to the element.
You may need to modify the javascript in order to fix that
You may need to modify the javascript in order to fix that
ASKER
Thanks for the reply.
Unfortunately, it more of a comment rather that a solution.
Unfortunately, it more of a comment rather that a solution.
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}}
;
});
});
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
no solution provided
Start here though by giving #simplemodal-container a property of overflow:hidden