[jQ plugin] zzConfirm - confirmation bubble - Tạo bong bóng xác nhận khi click

First topic message reminder :

jQ plugin: zzConfirm ^{Ver 0.1}
Tác giả: Zzbaivong


Chức năng: zzConfirm giúp bạn tạo một bong bóng xác nhận khi click vào một đối tượng.


Cài đặt: Xem thông tin và cập nhật mới nhất tại: https://github.com/baivong/zzConfirm

Code:

<!-- Thư viện jQuery 1.7.2+ -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- jQuery plugin zzConfirm -->
<link rel="stylesheet" href="./jquery.zzconfirm.min.css" type="text/css" />
<script type="text/javascript" src="./jquery.zzconfirm.min.js"></script>

Cách dùng:

Code:

$(selector).zzConfirm({
   param: value
});

THAM SỐ	PHÂN LOẠI	MẶC ĐỊNH	GHI CHÚ
content	htmlString	"Bạn chắc chứ?"	Nội dung câu hỏi, lời nhắc, ghi chú... Ví dụ: "Are you sure?"
lang	Array	["Có", "Không"]	Mảng chứa nội dung cho 2 nút lựa chọn, có thể dùng htmlString. Ví dụ: ["Ok", "Cancel"]
width	String	"auto"	Thiết lập chiều rộng mặc định cho bong bóng. Ví dụ: "150px"
dir	String	"top"	Vị trí hiển thị của bong bóng so với đối tượng. Có 4 lựa chọn: "top", "bottom", "left", "right"
toggle	Boolean	false	Ẩn/Hiện bong bóng khi click trở lại đối tượng. Có 2 lựa chọn: true, false
clickOut	Boolean	false	Ẩn bong bóng khi click ra vùng ngoài bong bóng và đối tượng. Có 2 lựa chọn: true, false
ok	Function	function(ele, bubble) {}	Hàm chạy khi xác nhận Có (Ok). Ví dụ: function(ele, bubble) {alert("Ok");}
cancel	Function	function(ele, bubble) {}	Hàm chạy khi xác nhận Không (Cancel). Ví dụ: function(ele, bubble) {alert("Cancel");}
Chú ý: Trong 2 hàm ok và cancel: ele là đối tượng vừa click. bubble là bong bóng xác nhận hiện tại.

Demo: Click vào các liên kết dưới đây

http://jsfiddle.net/baivong/gpvsm/show/

---

ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet:

Code:

/* jQuery plugin zzConfirm v0.2 by zzbaivong (http://devs.forumvi.com) */
#zzConfirm_wrap{background:none repeat scroll 0 0 #FFF;border:1px solid #DDD;min-width:140px;position:absolute;text-align:center;z-index:100;padding:7px 13px}
#zzConfirm_content{border-bottom:1px solid #DDD;color:#444;margin-bottom:7px;padding-bottom:5px}
#zzConfirm_btn > div{background:none repeat scroll 0 0 #004FBC;color:#FFF;display:inline-block;margin-left:10%;width:45%;padding:3px 0}
#zzConfirm_btn > div:last-child{background:none repeat scroll 0 0 #FF3D3D}
#zzConfirm_btn > div:first-child{margin-left:0}
#zzConfirm_btn > div:hover{background:none repeat scroll 0 0 #333;cursor:pointer}
#zzConfirm_wrap:before,#zzConfirm_wrap:after{position:absolute;display:block;width:0;height:0;content:"";border-color:transparent;border-style:solid}
#zzConfirm_wrap:before{border-width:11px}
#zzConfirm_wrap:after{border-width:10px}
#zzConfirm_wrap.top:before{bottom:-11px;left:50%;margin-left:-11px;border-top-color:#ccc;border-bottom-width:0}
#zzConfirm_wrap.top:after{bottom:-10px;left:50%;margin-left:-10px;border-top-color:#fff;border-bottom-width:0}
#zzConfirm_wrap.right:before{top:50%;left:-11px;margin-top:-11px;border-right-color:#ccc;border-left-width:0}
#zzConfirm_wrap.right:after{top:50%;margin-top:-10px;left:-10px;border-right-color:#fff;border-left-width:0}
#zzConfirm_wrap.bottom:before{top:-11px;left:50%;margin-left:-11px;border-bottom-color:#ccc;border-top-width:0}
#zzConfirm_wrap.bottom:after{top:-10px;left:50%;margin-left:-10px;border-bottom-color:#fff;border-top-width:0}
#zzConfirm_wrap.left:before{top:50%;right:-11px;margin-top:-11px;border-left-color:#ccc;border-right-width:0}
#zzConfirm_wrap.left:after{top:50%;right:-10px;margin-top:-10px;border-left-color:#fff;border-right-width:0}

Black Style by KirigayaKazuto:

ACP >> Modules >> HTML & JAVASCRIPT >> Javascript Codes >> Create a new javascript:
Title: jQuery Plugin zzConfirm v0.1
Placement: In all the pages
Javascript Code * :

Code:

/*!
 * jQuery Plugin zzConfirm v0.2
 *
 * by zzbaivong
 * http://devs.forumvi.com/
 */
(function (a) {
   var h = [];
   jQuery.fn.zzConfirm = function (b) {
      var d = jQuery.extend({
            content: "Bạn chắc chứ?",
            lang: ["Có", "Không"],
            width: "auto",
            dir: "top",
            toggle: !1,
            clickOut: !1,
            ok: function (a, d) {},
            cancel: function (a, d) {}
         }, b),
         e, c, r = function (a, c) {
            var e = a.outerWidth(),
               q = a.outerHeight(),
               m = a.offset().top,
               b = a.offset().left,
               f = c.outerWidth(),
               g = c.outerHeight(),
               n = m + (q - g) / 2,
               p = b + (e - f) / 2,
               h = d.dir;
            switch (h) {
            case "top":
               n = m - g - 10;
               break;
            case "bottom":
               n = m + q + 10;
               break;
            case "left":
               p = b - f - 10;
               break;
            case "right":
               p = b + e + 10
            }
            c.attr("class", h).show().animate({
               left: p,
               top: n,
               opacity: 1
            })
         };
      b = a(this);
      var f = b.selector,
         g;
      h.push(f);
      return b.on("click", function (b) {
         b.preventDefault();
         e = a(this);
         var k = function (c) {
            var b = a("#zzConfirm_wrap");
            c && (b = a('#zzConfirm_wrap[data-selector="' + c + '"]'));
            e.removeClass("zzConfirm_active");
            b.hide().css({
               left: g,
               top: "-100px",
               opacity: 0
            })
         };
         a(".zzConfirm_active").not(e).removeClass("zzConfirm_active");
         if ((b = e.hasClass("zzConfirm_active")) && d.toggle) k();
         else if (!b) {
            e.addClass("zzConfirm_active");
            a("#zzConfirm_wrap").length ? c = a("#zzConfirm_wrap") : (a("body").append('<div id="zzConfirm_wrap" style="width:' + d.width + ';left:50%;top:-100px;display:none"><div id="zzConfirm_content"></div><div id="zzConfirm_btn"><div id="zzConfirm_yes"></div><div id="zzConfirm_cancel"></div></div></div>'), c = a("#zzConfirm_wrap"), g = (a(window).width() - c.outerWidth()) / 2, c.css("left", g));
            a("#zzConfirm_content").html(d.content);
            a("div", "#zzConfirm_btn").off("click").on("click", function () {
               k()
            });
            a("#zzConfirm_yes").html(d.lang[0]).on("click", function () {
               d.ok(e, c)
            });
            a("#zzConfirm_cancel").html(d.lang[1]).on("click", function () {
               d.cancel(e, c)
            });
            c.attr("data-selector", f).css("width", d.width);
            r(e, c);
            var l = !0;
            a(window).resize(function () {
               l && (setTimeout(function () {
                  r(e.filter(".zzConfirm_active"), c);
                  l = !0
               }, 100), l = !1)
            });
            d.clickOut && a(document).click(function (b) {
               a(b.target).closest(c).length || a(b.target).closest(h.join()).length || k(f)
            })
         }
      })
   }
})(jQuery);

1. Xóa bài viết không chuyển trang:

Code:

$(function () {
   $("a[href*='mode=delete']").zzConfirm({
      content: "Bạn muốn xóa bài viết này?",
      // dir: "left",
      ok: function (ele) {
         var b = ele.closest(".post");
         b.css("opacity", 0.3);
         $.post(ele[0].href, {
            confirm: 1
         }, function (a) {
            b.slideUp(function () {
               b.remove();
               $(".post").length || location.replace($(".nav[href^='/f']:last")[0].href)
            })
         });
      }
   });
});

2. Xác nhận trước khi thoát:

Code:

$(function () {
   $("#logout").zzConfirm({
      content: "Bạn thực sự muốn thoát?",
      // dir: "bottom",
      ok: function (ele) {
         location.replace(ele[0].href);
      }
   });
});

Chú ý: Nếu bong bóng bị lệch ra ngoài phạm vi diễn đàn bạn có thể chỉnh hướng cho nó bằng thông số dir (Xóa 2 gạch chéo phía trước).

Phiên bản áp dụng: phpBB2, phpBB3, punBB, Invision

KTV2 wrote:À cho em hỏi, tại sao em dùng đúng script và không sửa lại một chỗ nào thì lúc trước sử dụng được nhưng 1, 2 ngày nay lại bị lỗi, nó bị như vầy

đưa cái tên lỗi ra và paste nguyên đoạn lỗi ra chứ vậy giúp bằng niềm :|

Draudrey wrote:

KTV2 wrote:À cho em hỏi, tại sao em dùng đúng script và không sửa lại một chỗ nào thì lúc trước sử dụng được nhưng 1, 2 ngày nay lại bị lỗi, nó bị như vầy

đưa cái tên lỗi ra và paste nguyên đoạn lỗi ra chứ vậy giúp bằng niềm :|

Code lỗi của mình

Code:

Nhưng dạo này vào Inspect ..... thì nó lại không báo là có lỗi nhưng khi click vào link đăng xuất thì nó lại out ra luôn không có popup.
Link demo: http://www.doraemon-vn.cf/
Nick test: Testing Account
doraeiga

thay js xác nhận trước khi thoát bằng cái này:

Code:

$(function () {
  $("a[href^='/login?logout=']").zzConfirm({
      content: "Bạn thực sự muốn thoát?",
      dir: "bottom",
      ok: function (ele) {
         location.replace(ele[0].href);
      }
   });
});

không được thì chuyển sang $("a[href^='/login?logout=1&tid=']").zzConfirm({, mà éo đươc nữa thì:

Code:

$(function () {
   $(".dropdown-content li[style='border-top:1px dashed #CACACA; list-style-type:none'] a").zzConfirm({ // lol
      content: "Bạn thực sự muốn thoát?",
      dir: "bottom",
      ok: function (ele) {
         location.replace(ele[0].href);
      }
   });
});

còn k được nữa thì mời thánh CSS vào =)) hoặc js bị xung đột rồi, post bài bằng android cùi nên hơi khó :v

em cũng bị giống bác, bác thử cho cái dòng

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

lên đầu tiên của thẻ <head> xem sao

Rồi, hóng thánh vào giúp.

Thử vào overall_header tìm:

Code:

/login?logout=1&tid=18d9b092779514cdc32d0b0d4c1ef9f9&key=0504a2

Thay bằng

Code:

/login?logout=

Rồi vào js của zzConfirm tìm:

Code:

/login?logout=1

Rồi xóa số 1 đi

Cách đó chả khác gì cách của @Draudrey. với lại mình đâu dùng link đó, mình dùng Veriable

KTV2 wrote:Rồi, hóng thánh vào giúp.

Bác thử cách của em chưa

kingofgame wrote:

KTV2 wrote:Rồi, hóng thánh vào giúp.

Bác thử cách của em chưa

Rồi bác, cái đó là JQuery của các forum làm bằng host, còn Forumotion đã có JQuery khác rồi

Tức là do bạn cài thêm script gì đấy và cũng đặt in all the page hoặc chỉnh sửa đâu đấy làm sai selector.
Script nó không dễ hết hạn hay bị ôi thiu như bánh mì đâu.

Của mình chỉ có 4 script zzRedirect; jQuery Plugin zzConfirm v0.1; Spoiler; Sửa URL liên kết; Twemoji mà chỉ có Twemoji, zzConfirm với Sửa URL liên kết là đặt In all the pages à, em thấy nó vẫn kết thúc bằng }); nhưng vẫn lỗi, nếu có thể em sẽ gửi nick admin cho anh xem thử

Xóa cái Twemoji xem.

Vẫn bị anh ơi

Tìm trong footer_begin, xóa:

Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Cảm ơn @Zzbaivong em đã làm được. Cảm ơn anh