前端常用效果（layer/swal）

2019独角兽企业重金招聘Python工程师标准>>>

1.等待状态

layer.load(1, {
		shade : [ 0.6, '#000' ]
	    },function(){ 
	    });

2.确认confirm框

layer.confirm('您确认从购物车中移除该课程吗？', {
				btn : [ '确定', '取消' ]
			}, function() {
                var url = hostUrl + '/stuCourse/deleteCart.json';
				var data = {
					id : id
				};
				var success = function(json) {
					if (json.success) {
						layer.closeAll('dialog');
						//window.location.reload();
						var url=hostUrl+"/stuCourse/courseQuery2/"+$("#sno").val()+
                                                        "?schoolId="+$("#schoolId").val()+
                                                        "&teacherId="+$("#teacherId").val()+
                                                        "&gradeId="+$("#grade").val()+
                                                        "&subjectId="+$("#subject").val()+
                                                        "&termId="+$("#term").val()+
                                                        "&levelId="+$("#level").val()+
                                                        "&keyword="+$("#keyword").val()+
                                                        /* "&sno="+$("#sno").val()+ */
                                                        "&limit="+$("#limit").val()+
                                                        "&offset="+$("#offset").val();
                       window.location.href=url;
					} else {
						layer.msg("移除失败,请稍候再试...", {
							icon : 5
						});
					}
				};
				T.ajaxPostJsonResult(url, data, success, null);
			});

3.错误提示框

swal("付款金额总数不对哦！", "", "error");

4.确认框

swal({
                title: "确认收到该订单的付款？",
                text: "",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#1c84c6",
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                closeOnConfirm: false,
                closeOnCancel: false
            }, function (isConfirm) {
                if (isConfirm) {
                  ……
                }
                else {
                    swal("已取消", "您取消了付款报名操作！", "error");
                }
             })

5.提示框

swal({
                                    title: "报名成功！",
                                    text: json.msg,
                                    type:"success"
                                },function(){
                                    window.location.href =  
                                });               

6.图片查看

<div class="col-sm-12 m-t">
            <div class="col-sm-12 m-t" id="showCon">
                <div class="img-group">
                    <div class="top-tip">
                        <div class="mask"></div>
                        <div class="tip-content">
                            <i class="fa fa-search" data-toggle="modal" data-target="#bigPic"></i>
                        </div>
                    </div>
                    <img src="images/user.jpeg">
                </div>
            </div>
 </div>

<!-- 图片查看 -->
    <div class="modal fade" id="bigPic" tabindex="-1" role="dialog" aria-labelledby="myLessonLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myLessonLabel">查看图片</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12" id="showPic">
                            <img class="img-preview" src=''>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    $("#showCon").on("click",".fa-search",function(){
        bigImg($(this));
    });
function bigImg(obj){
    var showPic = $("#showPic");
    var bigImg = showPic.find("img");
    var src = obj.parent().parent().siblings("img").prop("src");
    bigImg.prop("src","");
    bigImg.prop("src",src);
}

layer.msg("难过脸，失败", {
                    icon : 5
        });

layer.msg("勾，成功", {
                    icon : 1
        });

转载于:https://my.oschina.net/u/2342541/blog/786700