Question

如果我在我的索引页面上并且从我的移动设备点击后退按钮，我想退出我的应用程序。为此，我在我的索引页面上创建了一个data-role =“popup”，并且在后面的事件上我试图调用它但是没有成功，即我没有得到任何弹出窗口。有人可以帮我解决这个问题。

我在StackExchange上尝试了各种可用的帖子，但没有成功。

以下是我的代码。

如果我添加警告消息而不是 $（'＃popupMainClose'）。弹出（'打开'）; 我收到警报，但是弹出消息没有打开。

<!DOCTYPE HTML>
<html>
<head>

<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Genie</title>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
$(window).on("navigate", function (event, data) {
    var direction = data.state.direction;
    if (direction == 'back') {
        alert($('.ui-page-active').attr('id'));
        if ( $('.ui-page-active').attr('id') == 'mainpage') {
            $('#popupMainClose').popup('open');
        };
    }
});
</head>

<body>
    <div data-role="page" id="mainpage">
        <div data-id="commonHeader" data-role="header" data-position="fixed">
            <h1>Genie</h1>
            <a id="btnMainLogin" href="#Login" rel="external" data-icon="home">Login</a>
        </div>
        <div data-role="content">
            <ul id="mainlist" data-role="listview"></ul>
        </div>
        <div data-role="popup" id="popupMainClose" data-overlay-theme="a" data-theme="d">
            <div data-role="header" data-theme="a" class="ui-corner-top">
                <h1>Exit</h1>
            </div>
            <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a> 
            <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">

                <h1>Are you sure you want to exit?</h1>
                <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b" onClick=closeApplication(0)>No</a>  
                <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b" onClick=closeApplication(1)>Yes</a>  
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

最后我得到了答案。这适用于那些正在努力解决这个问题的人。您需要使用Dialog而不是Popup。请阅读Omar上面的评论。再次感谢奥马尔

<!DOCTYPE HTML>
<html>
<head>

<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Genie</title>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
$(window).on("navigate", function (event, data) {
    var direction = data.state.direction;
    if (direction == 'back') {
        if ( $('.ui-page-active').attr('id') == 'mainpage') {
            window.location = "#popupMainClose";
        };
    }
});
</head>

<body>
    <div data-role="page" id="mainpage">
        <div data-id="commonHeader" data-role="header" data-position="fixed">
            <h1>Genie</h1>
            <a id="btnMainLogin" href="#Login" rel="external" data-icon="home">Login</a>
        </div>
        <div data-role="content">
            <ul id="mainlist" data-role="listview"></ul>
        </div>
    </div>
    <div data-role="dialog" id="popupMainClose">
        <div data-role="header" data-theme="a" class="ui-corner-top">
            <h1>Exit</h1>
        </div>
        <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
            <h1>Are you sure you want to exit?</h1>
            <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b" onClick=closeApplication(0)>No</a>  
            <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b" onClick=closeApplication(1)>Yes</a>  
        </div>
    </div>
</body>
</html>

JQM;在app退出之前无法生成确认消息

1 个答案: