Question

我有一个HTML表单，我想在我的网站中多次使用，所以它打包在一个视图中，每次我想使用它时，我加载相同的视图。有时我在jquery dialog widget中使用它作为模态。

由于我已经在表单中定义了标题，因此我想将其用作对话框标题栏，默认情况下替换为标题栏。但是我想保留默认功能：关闭按钮和可拖动的事实。

原始HTML

<div id="form-info">
    <p class="title">The title</p>
    <form>
        <!--the form-->
    </form>
</div>

jQuery dialog()运行后的html

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <span id="ui-id-1" class="ui-dialog-title">&nbsp;</span>
    <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
    <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span></button>
</div>
<div id="form-info" class="ui-dialog-content ui-widget-content">
    <p class="title">The title</p>
    <form>
         <!--the form-->
    </form> 
</div>

我想要达成的目标：

<div id="form-info" class="ui-dialog-content ui-widget-content">
    <p class="title ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
        The title
        <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close"></button>
    </p>
    <form>
         <!--the form-->
    </form> 
</div>

span内的

ui-dialog-titlebar标签是可选的，我不需要它们，但我不在乎jQuery是否将它们放在那里。

我发现很多关于隐藏标题的Q＆amp; A，用CSS自定义它，隐藏关闭按钮......但没有这样的。

Answer 1

如果您不需要其他地方的段落，您可以将标记更改为

<div id="form-info" title="The title">
<form>
    <!--the form-->
</form>
</div>

或者如果您需要它，您可以在对话框的开放事件期间移动标题，如此

$("div#form-info").dialog({
    autoOpen: true,
    open: function() {
             var $formTitle = $("p.title", this);
             $(this).prev().find(".ui-dialog-title").text($formTitle.text());
             $formTitle.remove();
    }
});

有关工作示例，请参阅此JSFiddle

Jquery对话框，使用自定义html元素作为标题

1 个答案: