0

我正在使用 jquery 对话框...我不想使用他们使用 google api 作为背景颜色主题的方式，我想使用我自己的例如：关闭按钮必须在一个带有 X 的圆圈中，标题栏的背景应该设置为#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

4

1 回答 1

0

以下是如何自定义 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”归类为对话框中的关闭器（例如“取消”按钮）。

如果这有帮助，请给我。

于 2013-02-26T18:26:11.893 回答