jquery mobile 实现自定义confirm确认框效果的简单实例 - [技术教程]

导航首页 » 技术教程 » jquery mobile 实现自定义confirm确认框效果的简单实例

全站头部文字我要出现在这里

jquery mobile 实现自定义confirm确认框效果的简单实例 805 2024-02-28

类似删除的效果，在执行之前，一般需要添加确认对话框，点确认的话执行，取消按钮就不执行，传统的js

if(confirm('确定删除吗？'))

{

//执行代码

}

这种效果比较丑，使用jquery mobile优化一下

需要引用的文件：

效果如下：

查看图片

function UpdateStatus() {
  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">确认关闭任务吗？</h3>
            <a href="http://www.gimoo.net/t/1902/5c5a2c696378f.html" 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="http://www.gimoo.net/t/1902/5c5a2c696378f.html" 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) {
        //这里执行确认需要执行的代码
      }
    }
  });
  popupDialogObj.popup('open');
  popupDialogObj.find(".optionConfirm").first().on('click', function () {
    popupDialogObj.attr('data-confirmed', 'yes');
  });
}

以上就是小编为大家带来的jquery mobile 实现自定义confirm确认框效果的简单实例全部内容了，希望大家多多支持绿夏网~

#免责声明#

本站[绿夏技术导航]提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序或内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件[admin@lxwl520.com]与我们联系进行删除处理。敬请谅解！

文章分类