jQuery Modal – phương thức đóng sự kiện jquery

jQuery Modal là cách dễ nhất để hiển thị các cửa sổ phương thức với jQuery. Được xây dựng bởi Kyle Fox.

Bạn đang xem : phương thức đóng sự kiện jquery

jQuery Modal

Phương thức đơn giản nhất mà bạn từng thấy.

Dấu sao

  • Liên kết tự động sử dụng ngữ nghĩa HTML
  • Không có hình ảnh & amp; trọng lượng nhẹ (giảm khoảng 1k)
  • Đánh dấu đơn giản giúp bạn dễ dàng tạo kiểu
  • Đính kèm hành vi tùy chỉnh bằng cách sử dụng sự kiện jQuery
  • Đóng bằng cách nhấp hoặc phím ESC
  • Được xây dựng bởi @ kylefox 🍸

Phương pháp đơn giản nhất là sử dụng phiên bản được lưu trữ từ cdnjs :

  & lt;! - Nhớ bao gồm jQuery :) - & gt;
& lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js" & gt; & lt; / script & gt;

& lt;! - jQuery Modal - & gt;
& lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js" & gt; & lt; / script & gt;
& lt; link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" / & gt;  

Tham khảo README để biết thêm các tùy chọn cài đặt.

# Ví dụ 1: Mở & amp; Đóng bằng các liên kết

  1. Nhúng HTML phương thức vào tài liệu
  2. Tạo liên kết với rel = "modal: open" và đặt thuộc tính href thành id DOM của modal.
  & lt;! - HTML phương thức được nhúng trực tiếp vào tài liệu - & gt;
& lt; div id = "ex1" class = "modal" & gt;
  & lt; p & gt; Cảm ơn bạn đã nhấp vào. Thật tuyệt. & Lt; / p & gt;
  & lt; a href = "#" rel = "modal: close" & gt; Đóng & lt; / a & gt;
& lt; / div & gt;

& lt;! - Liên kết để mở phương thức - & gt;
& lt; p & gt; & lt; a href = "# ex1" rel = "modal: open" & gt; Open Modal & lt; / a & gt; & lt; / p & gt;  

Mở phương thức

Cảm ơn bạn đã nhấp vào. Cảm thấy tốt.
Nhấp vào đóng , nhấp vào lớp phủ hoặc nhấn ESC

# Ví dụ 2: biểu mẫu đăng nhập theo kiểu & amp; sự kiện

Ví dụ này cho thấy phương thức có thể tùy chỉnh trực quan như thế nào.

Mở phương thức

Vui lòng đăng nhập để tiếp tục

Tên người dùng:

Mật khẩu:

# Ví dụ 3: điều chỉnh theo nội dung

Ví dụ này cho thấy cách các phương thức được căn giữa một cách tự động. Nó cũng thể hiện cách thanh cuộn dọc xuất hiện bất cứ khi nào nội dung phương thức tràn.

Thêm!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. UT enim ad tối thiểu veniam, tập thể dục quis nostrud ullamco loa nisi ut aliquip ex e
Mở phương thức

# Ví dụ 4: AJAX

Sử dụng rel = "modal: open" để tự động tải nội dung trang vào một phương thức thông qua AJAX:

  & lt; a href = "ajax.html" rel = "modal: open" & gt; example & lt; / a & gt;  

Mở Phương thức

Bạn cũng có thể tải các trang AJAX theo cách thủ công vào một phương thức. Lưu ý rằng phản hồi AJAX phải được bao bọc trong một div có class modal :

  & lt;! - Liên kết bình thường - & gt; 
& lt; a href = "ajax.html" id = "manual-ajax" & gt; ví dụ thứ hai & lt; / a & gt;
  // Mở phương thức trong lệnh gọi lại AJAX
$ ('# manual-ajax'). click (function (event) {
  event.preventDefault ();
  this.blur (); // Xóa tiêu điểm khỏi liên kết đã nhấp theo cách thủ công.
  $ .get (this.href, function (html) {
    $ (html) .appendTo ('body'). modal ();
  });
});  
  & lt;! - Phản hồi AJAX phải được bao bọc trong lớp gốc của phương thức. - & gt; 
& lt; div class = "modal" & gt;
& lt; p & gt; Ví dụ AJAX thứ hai! & lt; / p & gt;
& lt; / div & gt;
Mở phương thức

# Ví dụ 5: cửa sổ không đóng được

Phần này trình bày cách tắt các phương thức đóng phương thức mặc định.

  $ ("# dính"). modal ({
  EscapeClose: sai,
  clickClose: false,
  showClose: false
});  

Mở phương thức

Nếu bạn làm điều này, hãy đảm bảo cung cấp cho người dùng một phương pháp thay thế để đóng cửa sổ.

# Ví dụ 6: Nhiều chế độ

Theo mặc định, mỗi lần chỉ có thể mở một phương thức. Nếu bạn mở một phương thức mới trong khi một phương thức hiện có đang mở, thì phương thức hiện có sẽ bị đóng trước.

Chế độ mở

Tuy nhiên, nếu bạn cần xếp chồng nhiều phương thức cùng một lúc, chỉ cần đặt tùy chọn closeExisting thành false .


$ ('# sub-modal'). modal ({
  closeExisting: false
});
 

Chế độ mở

Tôi là phương thức đầu tiên. Mở phương thức thứ hai ...

Tôi là phương thức thứ hai. Mở phương thức thứ ba ...

Tôi là phương thức thứ ba. Bạn có ý tưởng.

Tôi là phương thức đầu tiên. Mở phương thức thứ hai ...

Bản thân nỗi đau là quan trọng, nhưng nó làm như vậy
thấp hơn lần so với mệt mỏi và béo phì. Qua nhiều năm, tôi sẽ đến,
khu học chánh của chúng ta sẽ làm gì nếu không vì lợi ích của nó
hậu quả Nỗi đau sẽ lên án trong niềm vui sướng
để anh ta thoát khỏi nỗi đau của bóng đá, không có kết quả. Excepteur là những người da đen khao khát không
họ thấy rằng, họ có lỗi khi từ bỏ nhiệm vụ của mình, đó là hành động làm mềm tâm hồn.

Tôi là phương thức thứ hai. Mở phương thức thứ ba ...

Bài tập về nhà khiến người tiêu dùng khó chịu vì bị chỉ trích vui vẻ
để anh ta thoát khỏi nỗi đau của bóng đá, không có kết quả. Excepteur là những người da đen khao khát không
họ thấy rằng, họ có lỗi khi từ bỏ nhiệm vụ của mình, đó là hành động làm mềm tâm hồn.

Tôi là phương thức thứ ba. Bạn có ý tưởng.

# Ví dụ 7: Chuyển đổi mờ dần

Tuy nhiên, nếu bạn cần xếp chồng nhiều chế độ cùng một lúc, chỉ cần đặt tùy chọn thành

Bạn có thể đạt được hiệu ứng mờ dần đơn giản bằng cách chỉ định tùy chọn fadeDuration . < / p>

  $ ("# fade"). modal ({
  fadeDuration: 100
});  

Mở Phương thức

Bạn cũng có thể sử dụng fadeDelay để kiểm soát điểm trong quá trình mờ dần của lớp phủ mà tại đó phương thức mờ dần. Ví dụ: để mờ dần trong phương thức khi quá trình chuyển đổi lớp phủ hoàn thành 50%:

  $ ("# fade"). modal ({
  fadeDuration: 1000,
  fadeDelay: 0,50
});  

Mở Phương thức

Giá trị mặc định là 1.0 , nghĩa là quá trình chuyển đổi cửa sổ bắt đầu sau khi quá trình chuyển đổi lớp phủ kết thúc.
Giá trị lớn hơn 1.0 có nghĩa là có độ trễ giữa quá trình chuyển đổi lớp phủ hoàn thành và khi bắt đầu chuyển đổi cửa sổ:

  $ ("# fade"). modal ({
  fadeDuration: 1000,
  fadeDelay: 1.75 // Sẽ mờ dần trong 750ms sau khi lớp phủ kết thúc.
});  

Mở Phương thức

Mẹo: đặt fadeDelay: 0 để lớp phủ và cửa sổ mờ dần đồng thời.

Trên tinh thần giữ cho thư viện này nhỏ, mờ dần là quá trình chuyển đổi được hỗ trợ duy nhất. Khi phương thức này bị đóng, cả chuyển đổi ngoại cảnh và cửa sổ sẽ đồng thời thoát ra ngoài.

Bản thân nỗi đau là quan trọng, nhưng nó làm như vậy
thấp hơn lần so với mệt mỏi và béo phì. Qua nhiều năm, tôi sẽ đến,
khu học chánh của chúng ta sẽ làm gì nếu không vì lợi ích của nó
hậu quả Nỗi đau sẽ lên án trong niềm vui sướng
để anh ta thoát khỏi nỗi đau của bóng đá, không có kết quả. Excepteur là những người da đen khao khát không
họ thấy rằng, họ có lỗi khi từ bỏ nhiệm vụ của mình, đó là hành động làm mềm tâm hồn.

Phương thức này bắt đầu mờ dần sau khi lớp phủ mờ đi 50%.

Phương thức này bắt đầu mờ dần sau khi lớp phủ chuyển đổi xong.

# Ví dụ 8: Lớp tùy chỉnh cho nút đóng

Ví dụ này trình bày cách thêm các lớp bổ sung vào nút đóng (đối với các kiểu tùy chỉnh cho nút đóng):

  $ ("# custom-close"). modal ({
  closeClass: 'icon-remove',
  closeText: '!'
});  

Và tất nhiên là CSS tùy chỉnh của bạn

  .modal a.close-modal [class * = "icon-"]
  đầu trang: -10px;
  phải: -10px;
  chiều rộng: 20px;
  chiều cao: 20px;
  màu: # 000000;
  chiều cao dòng: 1,25;
  text-align: center;
  văn bản-trang trí: không có;
  text-thụt lề: 0;
  nền: # 900;
  border: 2px solid #ffffff;
  - webkit - đường viền - bán kính: 26px;
  - moz - đường viền - bán kính: 26px;
  -o-border-radius: 26px;
  -ms-border-radius: 26px;
  - moz - box - shadow: 1px 1px 5px rgba (0,0,0,5);
  -webkit-box-shadow: 1px 1px 5px rgba (0,0,0,0);
  box-shadow: 1px 1px 5px rgba (0,0,0,0);
}  

Mở phương thức

Phương thức này có nút đóng lạ mắt.


Xem thêm những thông tin liên quan đến chủ đề phương thức đóng sự kiện jquery

Binding event handlers in jquery

  • Tác giả: kudvenkat
  • Ngày đăng: 2015-04-27
  • Đánh giá: 4 ⭐ ( 7242 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Link for all dot net and sql server video tutorial playlists
    https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1

    Link for slides, code samples and text version of the video
    http://csharp-video-tutorials.blogspot.com/2015/04/binding-event-handlers-in-jquery.html

    Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
    https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

    In this video we will discuss binding event handlers to events using bind() method in jQuery

    One way to bind event handlers to events is by using the jQuery shorthand functions like .click, .mouseover etc. Bind method is another way of doing the same.

    The following example binds click event handler to the button - btnClickMe

    $('btnClickMe').bind('click', function () {
    $('divResult').html('Button Clicked');
    });

    Binds multiple event handlers to the button - btnClickMe. If required, the event object can also be passed to the event handler method, although it is optional.

    $('btnClickMe').bind('click mouseover mouseout', function (event) {
    if (event.type == 'click') {
    $('divResult').html('Button Clicked at ' + 'X = ' + event.pageX + ' Y = ' + event.pageY);
    }
    else if (event.type == 'mouseover') {
    $(this).addClass('ButtonStyle');
    }
    else {
    $(this).removeClass('ButtonStyle');
    }
    });

    Use the unbind() method to unbind the event handler
    $('btnClickMe').unbind('mouseover');

    To unbind all the event handlers of an element, use unbind() method without any parameters
    $('btnClickMe').unbind()

    Please note: If you are using jQuery 1.7 or higher, you should be using on() and off() methods instead of bind() and unbind() methods. We will discuss on() and off() methods in our next video.

Phương thức sự kiện jQuery

  • Tác giả: vi.w3hmong.com
  • Đánh giá: 5 ⭐ ( 3524 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: jQuery được thiết kế riêng để phản hồi các sự kiện trong trang HTML.

[JQuery] Phần 4: Các sự kiện trong jQuery

  • Tác giả: www.dammio.com
  • Đánh giá: 3 ⭐ ( 5318 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bắt các sự kiện DOM trong jQuery

  • Tác giả: xuanthulab.net
  • Đánh giá: 4 ⭐ ( 2842 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng jQuery bắt các sự kiện như click, keyup, tìm hiểu về đối tượng Event trong jQuery, phát sinh sự kiện ví dụ click

Hướng dẫn - Tìm hiểu về các phương thức sự kiện trong jQuery

  • Tác giả: vnxf.vn
  • Đánh giá: 4 ⭐ ( 4848 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu về các phương thức sự kiện trong jQuery

    DOM cho chúng ta một số event để tương tác với người dùng trên DOM, nay chúng ta có nhiều lựa chọn hơn khi...

các phương thức hay sử dụng ! ( P.1)

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 2786 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mình xin giới thiệu đến các bạn toàn tập tịch tà kiếm phổ jQuery thường được sử dụng, chi tiết nhất Nhắc về khái niệm của nó 1 chút : - jQuery là một thư viện javascript. - jQuery đơn giản hóa code ch...

Phương thức append() trong jQuery

  • Tác giả: webcoban.vn
  • Đánh giá: 4 ⭐ ( 5136 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách sử dụng phương thức append() trong jQuery để thêm một nội dung nào đó vào vị trí cuối cùng bên trong phần nội dung của phần tử HTML

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Chương trình Java để in tất cả các Bảng chữ cái viết hoa và viết thường - cách in chữ hoa trong java