當我打開一個對話框時,造型看起來有點混亂。關閉圖標不在應該的位置,邊框看起來太大。這裏是JsFiddle的鏈接爲什麼樣式在這個對話框上搞砸了?
我正在使用JQuery 1.5.1和JQuery-ui-1.8.11。
當我打開一個對話框時,造型看起來有點混亂。關閉圖標不在應該的位置,邊框看起來太大。這裏是JsFiddle的鏈接爲什麼樣式在這個對話框上搞砸了?
我正在使用JQuery 1.5.1和JQuery-ui-1.8.11。
chobo,與樣品的問題是缺少必要的JS和CSS文件進行對話的行動。
請查看此鏈接,因爲我已經固定您的樣品,包括所需的文件
從左上角檢查他們
下的「管理資源」,請標記爲答案,如果它幫助你。
它看起來並不像您有任何CSS的對話框。有a link in your CSS文件,轉到該鏈接,然後選擇下載主題,並確保您選擇小工具下的對話框,然後單擊「下載」。
+1我從來沒有意識到他們包括允許你編輯主題的鏈接,我想要改變一個或兩個主題的次數但不想再次做所有選擇的次數! – Scoobler 2011-03-24 23:24:57
可能是因爲jsFiddle不包括CSS或圖像在它的jQuery UI的實現?
你的CSS缺少對話框代碼。
/* Dialog
----------------------------------*/
.ui-dialog { position: relative; padding: .2em; width: 300px; }
.ui-dialog .ui-dialog-titlebar { padding: .5em .3em .3em 1em; position: relative; }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 0 .2em; }
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane button { float: right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; width:auto; overflow:visible; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }
或者你可以使用theme roller,使自己的CSS,請務必勾選你需要的選項。
或者你也可以使用標準主題的之一,you can even use it from the Google CDN
修正了這個例子,但我不明白爲什麼我的代碼不能在我的機器上工作。我已經包括jquery 1.5.1 min,jquery 1.8.11.js和css文件。 – chobo 2011-03-24 23:45:47
好吧,我從你的鏈接複製了CSS文件,我錯過了很多東西。 – chobo 2011-03-24 23:46:59