Question

我使用jquery-ui创建对话窗口。要在对话框中显示的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？

Answer 1

如果您只想为对话框添加一些宽度，可以使用：

dialog_my.dialog({width:450});

Answer 2

您正试图在dialog中找到一个类dialog_my的div，您的div。只是说：

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

甚至更好，使用链接方法：

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

Answer 3

jQuery UI为您的DOM元素添加了各种类，以使您的.dialog() - 调用工作。您可以使用它来设置您想要的元素的样式。

使用 css ：

.ui-dialog {
  width: 450px;
}

或 Javascript ：

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

官方plugin description的主题标签显示了您可以修改的更多内容。

jquery-ui对话框，如何在对话窗口的最外面的div上应用css？

3 个答案: