jQuery UI对话框滚动条+覆盖设置不会卸载 [英] jQuery UI Dialog Scroll Bar + Overlay Settings Won't Unload

查看：95
本文介绍了jQuery UI对话框滚动条+覆盖设置不会卸载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

最近，我的朋友帮助我解决了背景覆盖问题.我遇到的一个问题是，如果对话框的高度超出原始网站的背景，它将切断中间的叠加层.他的解决办法解决了.

Recently, my friend helped me fix a background overlay problem. I had an issue where if the dialog height extended beyond the original website background, it would cut off the overlay right in the middle. His fix solved it.

但是现在我有一个小问题但很烦人.每次我打开一个很长的对话框，然后再打开一个简短的对话框时，较长的对话框中的拉伸滚动条仍然存在.就像稍后打开短片一样，我可以像滚动长片一样向下滚动到背景之外，但只能看到叠加层.关闭对话框后，我认为设置无法正确卸载.

But now I have a minor but annoying problem. Every time I open a very long dialog, then a short one, the stretched scroll bars from the longer remains. Like when I open the short afterwards, I can scroll down way beyond the background like with the longer, but I can only see the overlay. I don’t think the settings are unloading properly once the dialog is closed.

有没有解决的办法?谢谢.

Is there a way around this? Thank you.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/global.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="Meta" -->
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="doctitle" -->
<title>Ricky Tsang | Book | Bonus Features</title>
<!-- InstanceEndEditable -->
<link href="../../css/default.css" type="text/css" rel="stylesheet" />
<link href="../../css/plugins/jquery.jscrollpane.css" type="text/css" rel="stylesheet" />
<link href="../../css/plugins/custom-theme/jquery-ui-1.8.12.custom.css" type="text/css" rel="stylesheet" />
<link rel="shortcut icon" type="image/x-icon" href="http://www.dearricky.com/_rickytsang-ca/favicon.ico">
<!--[if IE 7]>
<link href="../css/ie7.css" type="text/css" rel="stylesheet" />
<![endif]-->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<style>
a img {
    border:0
}
</style>
<noscript>
    <style>
    #header #inner { width: 820px; }
    #mainmenu { visibility: visible; }
    </style>
</noscript>
</head>

<body class="oneColElsCtrHdr">
<div id="header">
    <div id="top">
      <img src="../../images/logo.png" border="0" usemap="#Map" class="Logo" />
      <map name="Map" id="Map">
        <area shape="circle" coords="85,11,3" href="../../bird/" />
      </map>
</div>
    <div id="inner">
        <div id="mainmenu">
            <ul>
                <li>
                    <a href="../../" class="first">HOME</a>
                </li>
                <li>
                    <a href="../../ricky/aboutricky/" class="first parent">RICKY</a>
                    <div class="sub">
                        <ul>
                            <li><a href="../../ricky/aboutricky/" class="second">About Ricky</a></li>
                            <li><a href="../../ricky/disability/" class="second">Disability</a></li>
                            <li><a href="../../ricky/writing/" class="second">Writing</a></li>
                            <li><a href="../../ricky/questionsanswers/" class="second">Questions & Answers</a></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                </li>
                <li>
                    <a href="http://www.rickytsang.ca/blog/" class="first">JOURNAL</a>
                </li>
                <li>
                    <a href="../../advice/four/" class="first parent">ADVICE</a>
                    <div class="sub">
                        <ul>
                            <li><a href="../../advice/four/" class="second">4 Steps To Mending A Broken Heart</a></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                </li>
                <li>
                    <a href="../ridiculous/" class="first parent">BOOK</a>
                    <div class="sub">
                        <ul>
                            <li><a href="../ridiculous/" class="second">Ridiculous</a></li>
                            <li><a href="../excerpts/" class="second">Excerpts</a></li>
                            <li><a href="../bonusfeatures/" class="second">Bonus Features</a></li>
                            <li><a href="../wheretobuy/" class="second">Where To Buy</a></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                </li>
                <li>
                    <a href="../../music/" class="first">MUSIC</a>
                </li>
                <li>
                    <a href="http://www.rickytsang.ca/forum/" class="first">FORUM</a>
                </li>
                <li>
                    <a href="../../information/news" class="first parent">INFORMATION</a>
                    <div class="sub">
                        <ul>
                            <li><a href="../../information/news/" class="second">News</a></li>
                            <li><a href="../../information/contact/" class="second">Contact</a></li>
                            <li><a href="../../information/links/" class="second">Links</a></li>
                            <li><a href="../../information/website/" class="second">Website</a></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                </li>
          </ul>
        </div>
        <div class="clear"></div>
    </div>
</div>
<div id="container">
    <!-- InstanceBeginEditable name="AboveContainer" -->

    <!-- InstanceEndEditable -->
    <div id="topContent"></div>
    <div id="mainContent">
        <!-- InstanceBeginEditable name="MainContent" -->
        <div id="fixedHeightContent">
          <h1 align="justify">Bonus Features</h1>
          <p><strong><em><a href="../ridiculous/">Ridiculous:  The Mindful Nonsense of Ricky’s Brain</a></em> is jam-packed with  hundreds of pages of writing, but there are always limitations when it comes to  books.  Below are some extras that readers  may find entertaining, kind of like a DVD!</strong></p>
          <h2><strong><u>From The Book (with  excerpts)</u></strong></h2>
          <p><strong><a href="javascript:openDialog('../../pages/book/bonusfeatures/extras/2009-02-23-the-girl-who-saved-my-life.html');">The Girl Who Saved My Life</a></strong><br />
          A  true story about an amazing girl who stole my heart.  Includes a photo and video of interesting  items.</p>
          <p><strong><a href="javascript:openDialog('../../pages/book/bonusfeatures/extras/2009-08-10-rickys-adventures-in-bikini-land.html');">Ricky’s Adventures In  Bikini Land</a></strong><br />
            A  satirical recount of my "adventures" in Niagara Falls.  Includes a window scene photo from the room  where my family and I stayed.</p>
          <p><strong><a href="javascript:openDialog('../../pages/book/bonusfeatures/extras/2009-08-25-the-brain-behind-his-words.html');">The Brain Behind His Words</a></strong><br />
            A  brutally honest narrative of the things that go on inside my head.  Includes a full-size photo of myself that was  an inspiration for the piece.</p>
          <p><strong><a href="javascript:openDialog('../../pages/book/bonusfeatures/extras/2009-08-30-rickys-moments-of-wtf.html');">Ricky’s Moments Of WTF?!</a></strong><br />
          About  the stranger happenings in the life of yours truly.  Includes a few photos of… embarrassing  things.</p>
          <p><strong><a href="javascript:openDialog('../../pages/book/bonusfeatures/extras/2010-05-09-appreciating-mothers-the-how-to-guide.html');">Appreciating Mothers: The  How-To Guide</a></strong><br />
            A  comical yet hopefully endearing guide on how to appreciate mothers.  Includes a poem I wrote about the uterus.</p>
          <h2><strong><u>Pages That Didn’t Make It</u></strong>
          </h2>
          <p><strong><a href="javascript:openDialog('../../pages/book/bonusfeatures/deletedpages/2005-12-04-rickys-romantic-analogies.html');">Ricky’s Romantic Analogies</a></strong><br />
          No matter how much I edited this  entry, it continued to remain… corny.   Though, it did become a pivotal part of the romantic ideas for my  following writings.</p>
          <p><strong><a href="javascript:openDialog('../../pages/book/bonusfeatures/deletedpages/2006-08-29-monkey-see-monkey-do.html');">Monkey See, Monkey Do</a></strong><br />
            This  one seemed a little out of place for the book, despite the title.  It also had too many photos that only look  good in colour.</p>
        </div>
        <!-- InstanceEndEditable -->
    </div>
    <div id="bottomContent"></div>
</div>

<div id="footer">
    <div class="social">
        <ul>
            <li><a href="http://www.facebook.com/DearRicky/" target="_blank" title="Facebook"><img src="../../images/icons/facebook.png" /></a></li>
            <li><a href="http://www.twitter.com/DearRicky/" target="_blank" title="Twitter"><img src="../../images/icons/twitter.png" /></a></li>
        </ul>
    </div>
    <div class="copyright">
        Copyright &copy; 2011 Ricky Wai Kit Tsang.  All rights reserved.
    </div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="../../scripts/global.js"></script>
<script type="text/javascript" src="../../scripts/plugins/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../scripts/plugins/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="../../scripts/plugins/jquery.hoverIntent.js"></script>
<script type="text/javascript" src="../../scripts/plugins/jquery.mousewheel.js"></script>
<script type="text/javascript" src="../../scripts/plugins/jquery.jscrollpane.js"></script>
<script type="text/javascript">
    $(function() {
        $("#fixedHeightContent").jScrollPane({
            showArrows: true
        });
    });
</script>

<!-- InstanceBeginEditable name="Scripts" -->
<!-- InstanceEndEditable -->

</body>
<!-- InstanceEnd --></html>

CSS:

body {
    background: url("../images/backgrounds/glowing-clouds.jpg") no-repeat scroll center 130px #000;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #000000;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline; 
}

h1 {
    color: #000;
    margin-bottom: 20px;
    margin-top: 0px;
}

h2 {
    color: #000;
    font-size: 16px;
}

p {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 10px;
    margin-top: 0px;
}

.clear {
    clear: both;
}

#container {
    width: 880px;
    margin: 20px auto 0px auto;
    text-align: left;
}

#topContent {
    background-image: url("../images/backgrounds/slider-top.png");
    background-repeat: no-repeat;
    height: 15px;
    margin-top: 40px;
    width: 880px;
}

#mainContent {
    background: transparent url("../images/backgrounds/slider-body.png") repeat-y scroll 0 0;
    hasLayout: false;
    padding: 1px 15px;
    width: 850px;
}

#fixedHeightContent {
    height: 440px;
    outline: none;
    overflow: auto;
    padding: 20px;
    width: 810px;
}

#bottomContent {
    background-image: url("../images/backgrounds/slider-bottom.png");
    background-repeat: no-repeat;
    height: 15px;
    width: 880px;   
}

#floatContent {
    overflow: hidden} /**clears floats**/

.RightCaptions {/** container **/
    float: right;
    width: auto;
    height:auto;
    border: thin silver solid;
    margin: 0.5em;
    padding: 0.5em;
}

.LeftCaptions {/** container **/
    float: left;
    width: auto;
    height:auto;
    border: thin silver solid;
    margin: 0.5em;
    padding: 0.5em;
}

.RightCaptions p, .LeftCaptions p {/** text captions **/
    text-align: center;
    font-style: italic;
    font-size: small;
    text-indent: 0;
}

#header {
    margin: 0px 0px 10px;
    position: relative;
}

#header #top {
    background-color: #000;
    margin: 0px auto;
}

#header #inner {
    margin: 0px auto;
    width: 820px;
}

#header img.Logo {
    padding: 25px 0px 20px 0px;
    position: relative;
}

#mainmenu {
    float: right;
}

#mainmenu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#mainmenu ul li {
    display: block;
    float: left;
}

#mainmenu ul li a {
    color: #fff;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: 35px;
    line-height: 35px;
    padding: 0px 15px;
}

#mainmenu ul li a:hover {
    color: #999;
    text-decoration: none;
}

#mainmenu ul li a.parent {
    background: transparent url("../images/menu/menu-down.png") no-repeat center right;
    margin-right: 15px;
}

#mainmenu .sub {
    border: solid 1px #fff;
    display: none;
    position: absolute;
    z-index: 1000;
}

#mainmenu .sub ul {
    margin: 0px;
}

#mainmenu .sub li {
    border: none;
    display: block;
    float: left;
    height: auto;
    padding: 0px;
    width: auto;
}

#mainmenu .sub a {
    color: #fff;
    display: block;
    font-size: 12px;
    height: auto;
    line-height: 16px;
    padding: 5px 8px 7px;
    text-align: left;
}

#mainmenu .sub a:hover {
    background-image: none; 
}

#footer {
    margin: 0px auto;
    padding-bottom: 60px;
    width: 850px;
    position: relative;
    text-align: center;
}

#footer .social {
    position: absolute;
    top: 0;
    left: 10px;
}

#footer .social ul {
    list-style: none;
    margin: 10px 0px 0px;
    padding: 0px;
}

#footer .social li {
    float: left;
    margin-right: 5px;
}

#footer .social img {
    border: 0px;
}

#footer .copyright {
    color: #fff;
    line-height: 32px;
    margin-top: 10px;
}

/*******************************
 * Controls
 ******************************/

.ImageRotator {
    overflow: hidden;
    position: relative;
    width: 850px;
}

.ImageRotator ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 9999px;
}

.ImageRotator ul li {
    display: block;
    float: left;
    height: 440px;
    width: 850px;
    overflow: hidden;
}

.ImageRotator ul li img.gallery {
    border: 0px;
    height: 630px;
    width: 850px;
}

.ImageRotator .toolbar {
    background: url("../images/backgrounds/slider-toolbar.png") repeat scroll 0 0 transparent;
    bottom: 0px;
    color: #fff;
    height: 36px;
    left: 0px;
    position: absolute;
    width: 850px;
    z-index: 100;
}

.ImageRotator .toolbar .desc {
    font-weight: bold;
    margin: 10px;
    text-align: center;
}

.ImageRotator .toolbar .pages {
    margin: 5px;
    position: absolute;
    right: 0px;
}

.ImageRotator .toolbar .pages div {
    background: url("../images/backgrounds/page.png") repeat scroll 0 0 transparent;
    color: #999;
    cursor: pointer;
    float: left;
    font-weight: bold;
    height: 22px;
    padding-top: 6px;
    text-align: center;
    width: 28px;
}

.ImageRotator .toolbar .pages div.Active {
    color: #0f75a7;
}

/*******************************
 * Pages
 ******************************/

 .popupDialog {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 12px; 
 }

脚本:

<script type="text/javascript">
function openDialog(url) {
    $("<div class='popupDialog'>Loading...</div>")
        .dialog({
            autoOpen: false,
            closeOnEscape: true,
            width: '900',
            height: 'auto',
            modal: true,
            title: 'Bonus Features',
            autoResize: true,
            beforeClose: function(){   $(this).remove();   }
        }).bind('dialogclose', function() {
            jdialog.dialog('destroy');
        }).load(url, function() {
            $(this).dialog("option", "position", ['center', 'center'] ).bind('dialogopen', function() {
                    adjustJQueryDialogOverlay();
                });
                $(this).dialog("open");
        });
}

$(window).resize(function() {
    $(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});
</script>

推荐答案

所以这是我朋友的答案.

So here is the answer from my friend.

基本上，该覆盖是一个jQuery错误，我不得不四处寻找解决方法，因为您发现我的resize方法存在一点缺陷:P因此，您可以将openDialog方法行更改为(我们不会调用AdjustJQueryDialogOverlay方法):

Basically, the overlay is a jQuery bug and I had to search around for a workaround as my resize method which you discovered had a little flaw :P So what you can do is change the openDialog method line to (we won't call adjustJQueryDialogOverlay method):

$(this).dialog("option", "position", ['center', 'center'] );

$(this).dialog("open");

您还需要更新jquery-ui-1.8.11.custom.css第41行.将位置从绝对更改为固定，希望这可以解决后台问题！

And you also need to update the jquery-ui-1.8.11.custom.css line 41. Change the position from absolute to fixed and hopefully this will solve the background issue!

function openDialog(url) {
    $("<div class='popupDialog'>Loading...</div>")
        .dialog({
            autoOpen: false,
            closeOnEscape: true,
            width: '900',
            height: 'auto',
            modal: true,
            title: 'Bonus Features',
            beforeClose: function(){   $(this).remove();   }
        }).bind('dialogclose', function() {
            jdialog.dialog('destroy');
        }).load(url, function() {
            $(this).dialog("option", "position", ['center', 'center'] );
                $(this).dialog("open");
        });
}

$(window).resize(function() {
    $(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});

这篇关于jQuery UI对话框滚动条+覆盖设置不会卸载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆