手机页面中confirm提示框美化

最新推荐文章于 2024-06-15 09:37:22 发布

w348399060

最新推荐文章于 2024-06-15 09:37:22 发布

阅读量1.7k

点赞数

分类专栏： HTML alert，confirm

本文链接：https://blog.csdn.net/w348399060/article/details/70837763

版权

HTML 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

alert，confirm

1 篇文章 0 订阅

订阅专栏

1.需要引用的JS/CSS	<script charset="utf-8" src="../style-wechat/js/jquery-1.9.1.js?v=01291"></script>
	<script charset="utf-8" src="../style-wechat/js/jquery.mobile-1.4.5.min.js?v=01291"></script>
	<link rel="stylesheet" href="../style-wechat/css/jquery.mobile-1.4.5.min.css?v=01291">
2.JS方法。text为提示的信息，callback为选择确认后的回调函数
function confirmDialog(text,callback) {
    var popupDialogId = 'popupDialog';
    $('<div data-role="popup" id="' + popupDialogId + '" data-confirmed="no" data-transition="pop" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="min-width:216px;max-width:500px;"> \
          \
          <div role="main" class="ui-content">\
            <h3 class="ui-title" style="color:#fff; text-align:center;margin-bottom:15px">'+text+'</h3>\
            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b optionConfirm" data-rel="back" style="background: #1784fd;width: 33%;border-radius: 5px;height: 30px;line-height: 30px;padding: 0;font-size: .9em;margin: 0 0 0 12%;font-weight: 100;">确定</a>\
            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b optionCancel" data-rel="back" data-transition="flow" style="background: #DBDBDB;width: 33%;border-radius: 5px;height: 30px;line-height: 30px;padding: 0;font-size: .9em;margin: 0 0 0 5%;font-weight: 100;color: #333;text-shadow: none;">取消</a>\
          </div>\
        </div>')
        .appendTo($.mobile.pageContainer);
    var popupDialogObj = $('#' + popupDialogId);
    popupDialogObj.trigger('create');
    popupDialogObj.popup({
        afterclose: function (event, ui) {
            popupDialogObj.find(".optionConfirm").first().off('click');
            var isConfirmed = popupDialogObj.attr('data-confirmed') === 'yes' ? true : false;
            $(event.target).remove();
            if (isConfirmed) {
                //这里执行确认需要执行的代码
                callback();
            }
        }
    });
    popupDialogObj.popup('open');
    popupDialogObj.find(".optionConfirm").first().on('click', function () {
        popupDialogObj.attr('data-confirmed', 'yes');
    });
}