zoukankan      html  css  js  c++  java
  • 如何模拟alert/confirm/prompt实现阻断程序运行

      场景:在执行js的时候,我们希望运行到某处,进行用户交互,根据交互的内容,运行下面的程序;下面的js程序需要用的和用户交互的内容,所以,和用户交互时,后面的程序必须停止运行

      方案:

    • 1、 原生的alert/confirm/prompt是可以实现这样的操作的,但是它们的界面很丑,而且有些浏览器会禁掉这个三个操作
    • 2、利用插件,比如弹出层插件 layer:http://layer.layui.com/

      下面就说下方案2:

      官网下载layer组件,直接引入<script src="layer.js"></script>

      如下所示:把后续要执行的js代码放入函数中function(value, index, elem){},这样只有用户输入交互内容,才会执行后面的程序。

      layer.prompt({
                        "title":"请输入报告名字",
                yes:function(){}, //就是点击确定按钮的时候执行的操作;
                cancel:function(){}, //就是点击取消的时候执行的操作;
                end:function(){} //就是层在销毁的时候(等同于confirm结束的时候)
    }, function(value, index, elem){
                layer.close(index); //关闭对话框
    $.ajax({ type:"POST", url: url, contentType: 'application/json;charset=utf-8', data: JSON.stringify(data), dataType:'json', success:function (result) { {#$('#infomation').html('<div style="color:green">执行成功,请等待一会<i class="fa fa-smile-o"></i>……<i class="fa fa-refresh fa-spin"></i></div>');#} {#$('#report_name').attr('hidden','hidden');#} {#$('#infomation').removeAttr('hidden');#} {#$('#modal-default').modal('show');#} window.location.href = "/onlinePerform/jmeterDetail/" + result.project_id +"/"+result.scene_id+"/"+result.report_id }, fail: function (result,result1,result2) { {#$('#infomation').html('<div style="color:red">执行失败,请检查网络问题<i class="fa fa-smile-o"></i>……<i class="fa fa-refresh fa-spin"></i></div>');#} {#$('#report_name').attr('hidden','hidden');#} {#$('#infomation').removeAttr('hidden');#} {#$('#modal-default').modal('show');#} console.error(result) console.error(result1) console.error(result2) } }) });

    参考:

    1、http://www.layui.com/doc/modules/layer.html#layer.prompt

  • 相关阅读:
    SpringBoot 之 静态资源路径、显示首页、错误页
    微擎框架的缓存机制实现源码解读
    SpringBoot 之 多环境切换
    SpringBoot 之 JSR303 数据校验
    CSS——NO.6(盒模型)
    CSS——NO.5(格式化排版)
    CSS——NO.4(继承、层叠、特殊性、重要性)
    CSS——NO.3(CSS选择器)
    CSS——NO.2(CSS样式的基本知识)
    CSS——NO.1(初识CSS)
  • 原文地址:https://www.cnblogs.com/shengulong/p/9068982.html
Copyright © 2011-2022 走看看