jquery对话框调整高度权重并更改标题栏背景和关闭按钮img答案

【问题标题】：jquery dialog box adjust height weight and change the title bar background and close button imgjquery对话框调整高度权重并更改标题栏背景和关闭按钮img
【发布时间】：2013-02-10 15:18:11
【问题描述】：

我正在使用 jquery 对话框...我不想使用他们使用 google api 作为背景颜色主题的方式，我想使用我自己的例如：关闭按钮必须在带有 X 的圆圈中，标题bar的背景应该设置为#FFFFFF，对话框的高度和宽度必须根据我的数据调整（虽然不是动态的），请指导我，到目前为止我可以在对话框中弹出div，但是高度和宽度无法调整。有人可以指导我一个教程或调整...非常感谢

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">
<h:head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="JqueryLib/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="js/jquery-1.8.2.js"></script>
<h:outputStylesheet library="css" name="application_1.css"></h:outputStylesheet>
<style type="text/css">


</style>
<script>
$(document).ready(function(){
$("#viewDetails").click(function(){

$("#popup").dialog();



})    
});
</script>
</h:head>
<body>
<form id="Form1">
<h:outputText id= "viewDetails" value="View Details" outcome="#"/>
<div id="popup" class="popup" title="MyTitle" style="display: none">
This is my data table....where I can not adjust the data inside the dialog box...
</div>

</form>
</body>
</ui:composition>

我不想使用具有标题栏主题的 google api。我想自定义css

【问题讨论】：

请编辑您的帖子以包含代码。它没有出现在评论中。
由于某种原因我无法添加代码...你能帮我吗？我必须有5个声望吗？当我添加我的代码时，它说长 500 个字符..
编辑您的原始帖子，而不是在评论中。编辑链接位于您的帖子文本下方的蓝色标签下方。

标签： jquery dialog height

【解决方案1】：

这是一个如何自定义 jQuery 对话框的示例：

$(function() {
    $( "#dialog" ).dialog({position:['middle',60],  // set the position on the page to the middle and 60px down from the top margin
        open: function(event, ui) {  
        jQuery('.ui-dialog-titlebar-close').removeClass("ui-dialog-titlebar-close").html('<span style="float:right;"><img src="/EIWeb/images/Icons/x.png" /></span>');  // remove the titlebar background, remove the default button and replace with my own
    },  
        dialogClass: 'ui-widget-shadow',  // display a widget shadow
        modal: true,    // display the modal overlay
        autoOpen: false, // do not auto open
        width: '650px', // force set the width

        close: function(ev, ui) {$(this).close();}  // Set the dialog to close and remove upon clicking the "x" 
    });

    $( ".dialogOpener" ).click(function() { // Set a class to open the dialog
        $( "#dialog" ).dialog( "open" );
        return false;
    });
    $( ".btnDone" ).click(function(){ // Set a class to close the dialog
        $('.ui-dialog-content').dialog( "close" );
    });
});

这说明我想删除背景标题栏阴影（所以没有，只有标题），我想删除默认关闭按钮并将其替换为我自己的“x”图像，调用 ui- widget-shadow 类，并将宽度设置为 650px。

此外，这表示当单击关闭“x”时，它将关闭并删除对话框。我还将一个按钮“btnDone”归类为对话框中的关闭器（例如“取消”按钮）。

如果有帮助，请给我点赞。

【讨论】：