前端經常使用效果(layer/swal)

1.等待狀態javascript

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

2.確認confirm框html

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.錯誤提示框java

swal("付款金額總數不對哦!", "", "error");

4.確認框ajax

swal({
                title: "確認收到該訂單的付款?",
                text: "",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#1c84c6",
                confirmButtonText: "肯定",
                cancelButtonText: "取消",
                closeOnConfirm: false,
                closeOnCancel: false
            }, function (isConfirm) {
                if (isConfirm) {
                  ……
                }
                else {
                    swal("已取消", "您取消了付款報名操做!", "error");
                }
             })

5.提示框json

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

6.圖片查看this

<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
        });url

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

相關文章
相關標籤/搜索