phonegap+jquerymobile 自定义弹窗-优快云博客

本文介绍了一种使用自定义dialog.js脚本来创建和管理HTML5对话框的方法。通过实例展示了如何设置对话框的过渡效果、绑定点击事件及回调函数，实现弹窗的显示与关闭。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原创：转载说明出处

编写dialog.js文件，贴以下代码

 var jqmdialog={
        openDialog: function (options) {
            var href = options.href || "about:blank";
            var transition = options.transition || "none";
            $('body').append("<a id='tPushDialog' href='" + options.href + "' data-rel=\"dialog\" data-transition=\"pop\" style='display:none;'>Open dialog</a> ");
            $("#tPushDialog").trigger('click');
            $('body').find('#tPushDialog').remove();
            $("#" + options.dialog).live('pageshow', function (event) {
                if (typeof options.callback == 'function')
                    options.callback();
            });

        }
 }

编写dialogTest.html页面

<div data-role="page"  id="home" >   
   此处省略
<input type=button id=btnT value=tttt><div>

<div id="ExistConfirm" data-role="page">
        <div data-role="header"  data-theme="b">
        <h2>操作提示</h2>
      </div>
        <div data-role="content" >
            <p>
              <span id="spanMessage" style="font-weight: bold">是否退出？</span>
            </p>
            <a id="btnOk" data-role="button" data-rel="back" data-theme="b">是</a> 
            <a id="btnNO" data-role="button" data-rel="back" data-theme="c">否</a>
        </div>
    </div>

编写页面js脚本

jqmdialog.openDialog({
    href: "#ExistConfirm",//地址
    dialog: "MessageDialog",//标识
    callback: function () {//回调函数
        $("#btnOk").unbind("click").bind("click", function () {
//btnOk必须是existConfirm中的按钮，定义回调
alert("click:btnOK");
                       $("#MessageDialog").dialog("close");
        });
        $("#btnNO").unbind("click").bind("click", function () {
alert("click:btnNO");

            $("#MessageDialog").dialog("close");
        });
    }
});