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

  Bài viết hay nhất1
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.

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

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ẠIMẶ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 okcancel:
  • 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/



Ứng dụng trong forumotion

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


Zzbaivong
  Bài viết hay nhất2
Được đấy :3 Em viết Style cho nó rồi Post lên được chứ?
  Bài viết hay nhất3
Cái này thì hoan nghênh :3
  Bài viết hay nhất4
bài viết rất hay
đang cần cái này :D
(y)
  Bài viết hay nhất5
--- K. Style ---

Black Style:
Spoiler:

Overlay Style:
Spoiler:
  Bài viết hay nhất6
Áp dụng sao nhĩ ... lâu rùi mới làm lại FM hì hì
  Bài viết hay nhất7
do.xuanloc.35 wrote:Áp dụng sao nhĩ ... lâu rùi mới làm lại FM hì hì
bạn đọc hướng dẫn từ mục Ứng dụng trong forumotion....
  Bài viết hay nhất8
2 cái js cuối mình add vào chỗ nào?? Sao mình add vào chỗ js nun mà ko có hoạt động hè
  Bài viết hay nhất9
tạo js rồi nhét nó vô đó bạn...mình làm trên pun mặc định thấy chạy ok ma.
  Bài viết hay nhất10
Sao em làm không có kết quả gì hết vậy??? Cả ba cái đều không dc
link: http://future-generation.forumvi.com
nick test:member2000
pass:matkhau
  Bài viết hay nhất11
Script mình viết chung cho cấu trúc diễn đàn mặc định, còn diễn đàn của bạn thì đã sửa temp nên chức năng xác nhận trước khi thoát bạn thay bằng code:
Code:
$(function () {
   $('a[href^="/login?logout=1"]').zzConfirm({
      content: "Bạn thực sự muốn thoát?",
      dir: "bottom",
      ok: function (ele) {
         location.replace(ele[0].href);
      }
   });
});

Chức năng xóa bài viết không chuyển trang dùng zzConfirm mình không thấy bạn sử dụng, nếu sử dụng, bạn phải xóa đoạn script cùng chức năng, mà bạn lấy trong bài zzDel
  Bài viết hay nhất12
Dạ được rồi, em cảm ơn Admin!!! (y) :)
  Bài viết hay nhất13
I can't understand :(
  Bài viết hay nhất14
Cái nì hiện trên mobile được không nhỉ?
  Bài viết hay nhất15
À 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
[jQ plugin] zzConfirm - confirmation bubble - Tạo bong bóng xác nhận khi click Ads
  Bài viết hay nhất16

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
[jQ plugin] zzConfirm - confirmation bubble - Tạo bong bóng xác nhận khi click Ads
đư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 :|
  Bài viết hay nhất17

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
[jQ plugin] zzConfirm - confirmation bubble - Tạo bong bóng xác nhận khi click Ads
đư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
  Bài viết hay nhất18
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
  Bài viết hay nhất19
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
  Bài viết hay nhất20
Rồi, hóng thánh vào giúp.
  Bài viết hay nhất21
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
  Bài viết hay nhất22
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
  Bài viết hay nhất23

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

Bác thử cách của em chưa
  Bài viết hay nhất24

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
  Bài viết hay nhất25
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.
  Bài viết hay nhất26
You cannot reply to topics in this forum