jQuery-删除窗口大小的对话框

Question

我正在开发一个响应式网站。我必须为小于480px 的窗口大小创建一个弹出窗口，但对于桌面大小，内容必须是可见的（不在弹出窗口内）。我尽量不要重复内容两次。

这里是a fiddle link。

$(document).ready(function() {
    $(window).resize();
    $("#filterOpen").click(function() {
        $("#mobileFilter").dialog("open");

    });
});

$(window).resize(function() {
    if ($(window).width() > 480) {
        $("#mobileFilter").dialog({
            autoOpen: false,
            dialogClass: "test",
            modal: false,
            responsive: true
        });
    } else if ($(window).width() > 481) {
        $("#mobileFilter").dialog().remove();
    }
});

提前致谢。

Answer 1

我让它工作了。以下是代码。

 $(document).ready(function() {
                $(window).resize();
                $( "#filterOpen" ).click(function() { 
                $( "#mobileFilter" ).dialog( "open" );

    });
            });

$(window).resize(function() {
        if ($(window).width() > 480) {
                $( ".ui-dialog" ).dialog().remove();

        }else if ($(window).width() < 480) {
             $("#mobileFilter").dialog({
                autoOpen: false,
                dialogClass: "test",
                modal: false,
                responsive: true
            });

        }
  });