工作示例：

Question

我想以编程方式打开jquery-mobile对话框。我试着这样做：

$("#jenia-dialog").dialog()
#("jenia-dialog").dialog("open")
Error: no such method 'open' for dialog widget instance

这是我的html文件：

<!DOCTYPE html>
<html>
    <head>
    <title>Page Title</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>Sample</h1>
    </div>
    <div data-role="content">
        <p></p>
        <p><a href="dialog.html" data-rel="localhost/static/dialog" data-role="button">Is this a question?</a></p>
    </div>
</div>
<div data-role="page" data-url="dialog.html" id="dialog-jenia">
    <div data-role="header">
        <h1>Dialog</h1>
    </div>
    <div data-role="content">
        <p>Is this an answer?</p>
    </div>
</div>
</body>
</html>

这是我的jsfiddle页面：http://jsfiddle.net/kK24p/

我想要做的就是使用js而不是按钮打开对话框。

如果有人可以帮助我，那就太好了。

提前多多感谢。

Answer 1

工作示例：

解决方案1

第1页： - index.html

<!DOCTYPE html>
<html>
    <head>
    <title>Page Title</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>Sample</h1>
    </div>
    <div data-role="content">
        <p></p>
        <p><a href="dialog.html" data-rel="dialog" data-role="button">Open dialog</a></p>
    </div>
</div>
</body>
</html>

第2页： - dialog.html

<div data-role="page">
    <div data-role="header">
        <h1>Dialog</h1>
    </div>
    <div data-role="content">
        This is dialog content
    </div>
</div>

解决方案2

<!DOCTYPE html>
<html>
    <head>
    <title>Page Title</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
    <script>
    $(document).on('pagebeforeshow', '#index', function(){ 
        $(document).on('click', '#open-dialog', function(){ 
            $.mobile.changePage("#jenia-dialog", {transition: 'pop', role: 'dialog'});  
        });
    });
    </script>
</head>
<body>
<div data-role="page" id="index">
    <div data-role="header">
        <h1>Sample</h1>
    </div>
    <div data-role="content">
        <p></p>
        <p><a id="open-dialog" data-role="button">Onen dialog</a></p>
    </div>
</div>
<div data-role="dialog" id="jenia-dialog">
    <div data-role="header">
        <h1>Dialog</h1>
    </div>
    <div data-role="content">
        This is dialog content
    </div>
</div>  
</body>
</html>

以编程方式打开对话框的正确方法需要 changePage 功能，如下所示：

$.mobile.changePage("#jenia-dialog", {transition: 'pop', role: 'dialog'});

如果您需要打开外部对话框，则同样有效：

$.mobile.changePage("dialog.html", {transition: 'pop', role: 'dialog'});

Answer 2

我对您的代码做了几处更改，请参考。我删除了在第一页中打开div <div data-role="content">的结束标记。它是有线的，但将来解决它，下一点是你不能在弹出窗口中加载这样的外部页面。请参阅此链接How to load an external page in JQM popup

<div data-role="page">
    <div data-role="header">
        <h1>Sample</h1>
    </div>
    <div data-role="content">

        <a href="#dialog-jenia" data-rel="popup" data-role="button">Is this a question?</a>


</div>
<div data-role="popup"  id="dialog-jenia">
    <div data-role="header">
        <h1>Dialog</h1>
    </div>
    <div data-role="content">
        <p>Is this an answer?</p>
    </div>
</div>

jQuery的移动。无法以编程方式打开对话框;尝试了我能想到的一切

2 个答案:

工作示例：

解决方案1

解决方案2

jQuery的移动。无法以编程方式打开对话框;尝试了我能想到的一切

2 个答案:

工作示例：

解决方案1 ​​

解决方案2

解决方案1