jquery-ui對話框，如何將css應用於對話窗口上的最外層div？

我正在使用jquery-ui創建一個對話窗口。要在對話框中顯示的div具有「對話框」類。jquery-ui對話框，如何將css應用於對話窗口上的最外層div？

讓我們看看HTML第一：

<div class="click_me"> 
Click Me 
</div><!-- end of class click_me--> 


<div class="dialog"> 

this is my dialog 

</div>

CSS和JavaScript如下：

<style type="text/css"> 

.click_me{ 
    width:120px; 
    border:1px solid red; 
    text-align:center; 

    } 


.dialog{ 

    width:230px; 
    border:1px solid green; 
    text-align:center; 


    } 

</style> 

<script type="text/javascript" src="js/jquery-1.7.1.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> 


<script type="text/javascript"> 

$(document).ready(function(){ 

$(".click_me").click(function(){ 

    dialog_my= $(".dialog").clone(false); 
    dialog_my.dialog(); 
    $(".dialog",  dialog_my).css('width','450px'); 


    } 


); 


    }); 


</script>

但行$(".dialog", dialog_my).css('width','450px');沒有效果。如果我省略上下文並將代碼編寫爲$(".dialog").css('width','450px');，那麼CSS將應用於平面網頁和模式窗口。

如何才能將css應用於模態窗口？

來源

2012-03-06 Istiaque Ahmed

您正在嘗試在dialog_my中找到類dialog的div，其中是您的div。只要把：

dialog_my.css('width','450px');

甚至更好，與鏈接方法：

 
dialog_my = $(".dialog").clone(false).dialog().css('width','450px');

來源

2012-03-06 07:27:32

請在papaiatis的回覆中看到我的評論 – 2012-03-06 07:37:03

它不起作用，因爲jQuery試圖在** div中找到類'dialog'的div。最外面的div不是DOM遍歷的一部分。正如你可以在[這個小提琴]上看到的（http://jsfiddle.net/DCYNk/），CSS不適用於div。 – 2012-03-06 07:41:18

如果你只是想給一些寬度的對話框，您可以使用此：

dialog_my.dialog({width:450});

來源

2012-03-06 07:28:17 papaiatis

這裏[一個例子]（http://jsfiddle.net/YUK8r/）。 – scessor 2012-03-06 07:31:56

@papaiatis，爲什麼不考慮上下文的線路工作？我認爲考慮上下文將工作，如果div不是最外面的div。 – 2012-03-06 07:36:22

因爲對象'dialog_my'中沒有類'dialog'的元素。你可以這樣檢查：'alert（dialog_my.html（））;' – papaiatis 2012-03-06 07:42:43

jQuery UI爲您的DOM元素添加了各種類，以使您的.dialog()-call可以工作。你可以用它來設計你想要的元素。

隨着CSS：

.ui-dialog { 
    width: 450px; 
}

或者的Javascript：

$('.ui-dialog').width(450);

官方plugin description的主題化選項卡會顯示更多的東西，你可以修改。

來源

2012-03-06 07:37:27

jquery-ui對話框，如何將css應用於對話窗口上的最外層div？

回答

相關問題