jQuery UI对话框滚动条+覆盖设置无法卸载

最近，我的朋友帮我解决了背景重叠问题。 我有一个问题，如果对话框高度超出原始网站背景，它将切断中间的叠加。 他的修复解决了它。

但现在我有一个轻微但烦人的问题。 每次我打开一个很长的对话框，然后是一个短的对话框，从较长的对话框中拉伸的滚动条仍然存在。 就像我之后打开短片一样，我可以向下滚动超出背景，就像用更长的时间，但我只能看到叠加。 关闭对话框后，我认为设置没有正确卸载。

有没有解决的办法？ 谢谢。

HTML：

                 a img { border:0 }    #header #inner { width: 820px; } #mainmenu { visibility: visible; }     
 
   
 
 
 
 
 HOME 
 
 RICKY 
 
 
About Ricky
 
Disability
 
Writing
 
Questions & Answers
 
 
 
 
 
 JOURNAL 
 
 ADVICE 
 
 
4 Steps To Mending A Broken Heart
 
 
 
 
 
 BOOK 
 
 
Ridiculous
 
Excerpts
 
Bonus Features
 
Where To Buy
 
 
 
 
 
 MUSIC 
 
 FORUM 
 
 INFORMATION 
 
 
News
 
Contact
 
Links
 
Website
 
 
 
 
 
 
 
 
 
 
   
 
  
 
Bonus Features
 
Ridiculous: The Mindful Nonsense of Ricky's Brain 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!
 
From The Book (with excerpts)
 
The Girl Who Saved My Life
 A true story about an amazing girl who stole my heart. Includes a photo and video of interesting items.
 
Ricky's Adventures In Bikini Land
 A satirical recount of my “adventures” in Niagara Falls. Includes a window scene photo from the room where my family and I stayed.
 
The Brain Behind His Words
 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.
 
Ricky's Moments Of WTF?!
 About the stranger happenings in the life of yours truly. Includes a few photos of… embarrassing things.
 
Appreciating Mothers: The How-To Guide
 A comical yet hopefully endearing guide on how to appreciate mothers. Includes a poem I wrote about the uterus.
 
Pages That Didn't Make It 
 
Ricky's Romantic Analogies
 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.
 
Monkey See, Monkey Do
 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.
 
  
 
 
 
 
 
 
 
 
 
 
 Copyright © 2011 Ricky Wai Kit Tsang. All rights reserved. 
 
         $(function() { $("#fixedHeightContent").jScrollPane({ showArrows: true }); });      

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; } 

脚本：

  function openDialog(url) { $("
Loading...
") .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']); });  

Answer 1

好吧，你不应该被要求这样做，但是当我遇到同样的问题时，我发现的最简单/最快的解决方法是在创建一个新方法之前调用对话框的destroy方法。 所以你会尝试这样的事情：

 $(".ui-dialog-content").dialog("destroy"); 

这位于脚本中设置新对话框的区域之前。

HTH。

编辑：根据要求：

应该只需要更新脚本部分。

Answer 2

所以这是我朋友的答案。

基本上，叠加是一个jQuery错误，我不得不四处搜索一个解决方法，因为我发现你的resize方法有一点缺陷：P所以你可以做的是将openDialog方法行改为（我们不会调用adjustJQueryDialogOverlay方法） ）：

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

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

 function openDialog(url) { $("
Loading...
") .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']); });