1

I'm new to JS and jQuery. Actually, I'm working on my first project right now.

I'm using the latest versions of jQuery, jQueryUI and jQuery Mobile. My page works fine in IE 9, but not in IE 10, Chrome or Firefox. The main problem is that the 'X' close button does not close the dialog. The URL updates (the "#dialogPage" is removed) but the dialog remains open.

The 2nd half of my problem is that the button I configured in my dialog does not appear in any browser.

Here is my code for the dialog page (this is in the same html page as my main page code, in case that matters):

<div data-role="page" id="dialogPage" class="type-home">  
<header>  
    <script type="text/javascript">  
        $(function () {  
            $("#dialogPage").dialog({  
                resizable: false,  
                modal: true,  
                buttons: {  
                    "Ok": function () {  
                        $(this).dialog("close");  
                    }  
                }  
            });  
        });  
    </script>  
    <div data-role="header">  
        <h2 id="txTitle"></h2>  
    </div>  
</header>  
<div data-role="content">  
    <h3 id="txMessage"></h3>  
</div>

I call this page from a function that calls a WCF service to get data. The line that calls this page is:

$.mobile.changePage('#dialogPage');

I've searched all over SO and Google and tried every solution suggested. Nothing has worked.

Ideally, I want to hide the default 'X' close button and just have an "Ok" button that closes the dialog. At this point though I'll be happy just to get the 'X' button to work in all browsers.

4

1 回答 1

1

我终于想通了。很大一部分问题是我同时使用了 jQuery UI 和 jQuery Mobile。每个库都提供一个对话框。我还在 VSTS 2012 中使用来自 Sri Varenya 的 HTML5 客户端模板（可在线获得）启动了该项目。该模板有几个参考脚本可以加载许多其他库。最后，我评论了引用的每个脚本，现在我只加载 jQuery、jQuery Mobile 和我的自定义项目特定脚本。

现在一切正常，只花了大约一周的时间（嘘）！

于 2013-08-16T17:57:52.347 回答