JQuery UI自定義模式對話框

我想創建一個使用JQuery UI的模式彈出效果1.7.2 基本上我需要一個正常的錯誤小部件，以阻止其他頁面彈出。我們在工作中使用IE6，並且沒有辦法升級。目前我正在嘗試這個。JQuery UI自定義模式對話框

<div id="errorPopup" style="display: none;"> 
    <div class="ui-overlay"> 
    <div class="ui-widget-overlay"></div> 
    <div class="ui-widget-shadow ui-corner-all" style="width: 302px; height: 300px; position: absolute; top: 1em; left: 1em;"></div> 
    </div> 
    <div style="position: absolute; left: 35em; top: 30em; padding: 10px;" class="ui-state-error ui-widget ui-widget-content ui-corner-all"> 
    <div class="ui-state-error ui-dialog-content ui-widget-content" style="background: none; border: 0;"> 
     <p> 
     <span class="ui-icon ui-icon-alert" style="float: left; margin-right: 0.3em;"></span> 
     <strong>Opps:</strong> That wasn't meant to happen. 
     </p> 
    </div> 
    </div> 
</div>

請注意使用JQuery的UI類。這不起作用，我不知道爲什麼。我試圖避免編寫自己的CSS和JS來獲得效果，因爲轉移到JQuery UI的原因是爲了處理他的東西。

歡迎任何建議！

來源

2010-02-11 MrJoeBlow

的功能是什麼jQuery代碼是什麼樣子？發生了什麼不該呢？ – nortron 2010-02-11 13:40:59

拼寫錯誤「oops」:-)當你說它不起作用時，究竟出了什麼問題？我知道IE6主要的問題是對話框代碼可以在頁面和對話框之間插入（在「z」軸上）半透明層。 – Pointy 2010-02-11 14:35:31

你有沒有考慮過使用現有的庫來處理這些事情？我喜歡facebox（http://famspam.com/facebox）還有一個叫做lightbox的超級流行。 – tybro0103 2010-02-11 21:12:02

我會感興趣的爲什麼jQuery UI不起作用。

你可以試試下面的插件。看看演示頁面，看看它是否適合 http://malsup.com/jquery/block/#

來源

2010-02-11 13:47:49

我真的不知道自己，但它在firefox中幾乎完美地工作，所以必須有額外的東西讓我在IE6上工作。 – MrJoeBlow 2010-02-11 13:58:17

我想你試圖做的手動模仿對話框presention。我會建議使用javascript運行對話框，jQuery會做一些funcky的東西來修復它的IE6。

下面是簡單的版本：

<div id="dialog" title="Dialog Title" style="display:none;"></div> 
<script> 
    $(document).ready(function(){ 

     $('#dialog').dialog({ modal: true, 
       bgiframe: true, 
       open: function(){} 
      });  
     }); 
</script>

如果你想要做手工，這將是這樣的：

<div class="ui-widget-overlay" style="width: 1263px; height: 2253px; z-index: 1001;"></div> 
<div style="display: block; position: absolute; overflow: hidden; z-index: 1002; outline: 0px none; height: auto; width: 330px; top: 169px; left: 463px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" unselectable="on" style="-moz-user-select: none;"><span class="ui-dialog-title" id="ui-dialog-title-dialog" unselectable="on" style="-moz-user-select: none;">Make an enquiry</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button" unselectable="on" style="-moz-user-select: none;"><span class="ui-icon ui-icon-closethick" unselectable="on" style="-moz-user-select: none;">close</span></a></div><div style="height: 242px; min-height: 117px; width: auto;" id="dialog" class="ui-dialog-content ui-widget-content">ERROR STUFF</div>

正如你可以看到它是非常混亂！

哦，還有一兩件事：請務必包括「jquery.bgiframe.min.js」和「bgiframe: true」，因爲它能夠在對話框中IE6

來源

2010-02-12 01:06:03 Zoheir

嗨thansk的答案。但我沒有試圖像這樣實現對話框。我希望它是模態的，但只是有錯誤的UI小部件顯示。如果我按照你的建議做了第一件事，那麼它會爲我創建一個正常的對話框。 – MrJoeBlow 2010-02-12 08:33:58

@TAkinremi：也許我完全不理解你。如果它只在IE中不工作，請嘗試使用bgiframe。 – Zoheir 2010-02-13 06:52:17

JQuery UI自定義模式對話框

回答

相關問題