如何模拟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