如何关闭(X)关闭按钮点击事件的对话框?

时间:2023-02-01 17:03:54

My mobile website has some multiselect controls. The multiselect that have a little number of items (5) appears normally, like a multiselect (in mobile style/format), but those that have more items than 5 appears like an dialog view, in a new page. For some reason, the X button is unresponsive and doesn't have the colse effect. What should I do to make the X button works? multiselect code:

我的移动网站有一些多选控件。具有少量项目(5)的多选项通常显示,如多选(以移动样式/格式),但是具有多于5的项目的多选项在新页面中显示为对话视图。由于某种原因,X按钮没有响应,并且没有colse效果。我该怎么做才能让X按钮工作?多选代码:

<div class="field ">
        <label for="offices" class="select">
            Office(s):
        </label>
        @Html.ListBoxFor(m => m.Offices, Model.ListOfOffices, new { Multiple = "multiple", data_theme = "a", data_overlay_theme = "c", inline = "true", data_native_menu = "false" })
 </div> 

jquery code:

jquery代码:

$(".ui-icon-delete").click(function () {
  //$('.ui-dialog').hide(); no effect
  //$('div[data-role="dialog"]').popup("close"); no effect
  //$('div[data-role="dialog"]').dialog("close"); no effect
  //$('ui-dialog').dialog('close'); no effect
  $(this).parent().remove(); // this one close the dialog, but also remove the X button
  });

Thanks!

谢谢!

2 个解决方案

#1


0  

Your dialog should have an ID associated with it. Considering your dialog has been initiated correctly you should be able to do:

您的对话框应该有一个与之关联的ID。考虑到您的对话框已正确启动,您应该能够:

<div id="dialog">
    <label for="offices" class="select">
        Office(s):
    </label>
    @Html.ListBoxFor(m => m.Offices, Model.ListOfOffices, new { Multiple = "multiple",  data_theme = "a", data_overlay_theme = "c", inline = "true", data_native_menu = "false" })
</div>

To close:

关闭:

$(".ui-icon-delete").click(function () {
   $('#dialog').dialog('close');
}

#2


0  

$("[class=field]").css({ "display" : "none" });

Just Use .css() jQuery to hide that Element/Node by adding property of display:none.

只需使用.css()jQuery通过添加display:none属性来隐藏该元素/节点。

What It will do?

It will hide that element/node from current HTML tree but will not remove it.

它将隐藏当前HTML树中的元素/节点,但不会将其删除。

#1


0  

Your dialog should have an ID associated with it. Considering your dialog has been initiated correctly you should be able to do:

您的对话框应该有一个与之关联的ID。考虑到您的对话框已正确启动,您应该能够:

<div id="dialog">
    <label for="offices" class="select">
        Office(s):
    </label>
    @Html.ListBoxFor(m => m.Offices, Model.ListOfOffices, new { Multiple = "multiple",  data_theme = "a", data_overlay_theme = "c", inline = "true", data_native_menu = "false" })
</div>

To close:

关闭:

$(".ui-icon-delete").click(function () {
   $('#dialog').dialog('close');
}

#2


0  

$("[class=field]").css({ "display" : "none" });

Just Use .css() jQuery to hide that Element/Node by adding property of display:none.

只需使用.css()jQuery通过添加display:none属性来隐藏该元素/节点。

What It will do?

It will hide that element/node from current HTML tree but will not remove it.

它将隐藏当前HTML树中的元素/节点,但不会将其删除。