下面小编就为大家带来一篇jquery mobile 实现自定义confirm确认框效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
类似删除的效果，在执行之前，一般需要添加确认对话框，点确认的话执行，取消按钮就不执行，传统的js
if(confirm('确定删除吗？')) { //执行代码 }
这种效果比较丑，使用jquery mobile优化一下
需要引用的文件：
<script src="https://www.jb51.net/~/Scripts/jquery-1.10.2.min.js"></script>
<link href="https://www.jb51.net/~/Scripts/Mobile/jquery.mobile-1.4.0.min.css" />
<script src="https://www.jb51.net/~/Scripts/Mobile/jquery.mobile-1.4.0.min.js"></script>
效果如下：
function UpdateStatus() { var popupDialogId = 'popupDialog'; $('<div data-role="popup" data-confirmed="no" data-transition="pop" data-overlay-theme="b" data-theme="b" data-dismissible="false"> \ \ <div role="main">\ <h3>确认关闭任务吗？</h3>\ <a href="#" data-rel="back">确定</a>\ <a href="#" data-rel="back" data-transition="flow">取消</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) { //这里执行确认需要执行的代码 } } }); popupDialogObj.popup('open'); popupDialogObj.find(".optionConfirm").first().on('click', function () { popupDialogObj.attr('data-confirmed', 'yes'); }); }
以上就是小编为大家带来的jquery mobile 实现自定义confirm确认框效果的简单实例全部内容了，希望大家多多支持脚本之家~
您可能感兴趣的文章: