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