有没有可能打开一个jQuery UI对话框没有标题栏?


当前回答

当初始化对话框时,你可以使用jquery在使用dialogClass后隐藏标题栏。

init期间:

$('.selector').dialog({
    dialogClass: 'yourclassname'
});

$('.yourclassname div.ui-dialog-titlebar').hide();

通过使用这种方法,你不需要改变你的css文件,这也是动态的。

其他回答

我认为最好的解决方案是使用选项dialogClass。

jquery UI文档的一个摘录:

在init: $('.selector')期间。dialog({dialogClass: 'noTitleStuff'});

或者在init之后。:

$('.selector').dialog('option', 'dialogClass', 'noTitleStuff');

所以我创建了一些对话框选项dialogClass='noTitleStuff'和css像这样:

.noTitleStuff .ui-dialog-titlebar {display:none}

太简单了!!但是我花了1天的时间来思考为什么我之前的id->类钻井方法不起作用。事实上,当你调用.dialog()方法时,你转换的div成为另一个div(真正的对话框div)的孩子,可能是标题栏div的“兄弟”,所以很难尝试从前者开始寻找后者。

当初始化对话框时,你可以使用jquery在使用dialogClass后隐藏标题栏。

init期间:

$('.selector').dialog({
    dialogClass: 'yourclassname'
});

$('.yourclassname div.ui-dialog-titlebar').hide();

通过使用这种方法,你不需要改变你的css文件,这也是动态的。

试试这个

$("#ui-dialog-title-divid").parent().hide();

将divid替换为相应的id

这招对我很管用:

$("#dialog").dialog({
    create: function (event, ui) {
        $(".ui-widget-header").hide();
    },

下一种形式解决了我的问题。

$('#btnShow').click(function() { $("#basicModal").dialog({ modal: true, height: 300, width: 400, create: function() { $(".ui-dialog").find(".ui-dialog-titlebar").css({ 'background-image': 'none', 'background-color': 'white', 'border': 'none' }); } }); }); #basicModal { display: none; } <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" /> <div id="basicModal"> Here your HTML content </div> <button id="btnShow">Show me!</button>