Examples of jQuery mask layer implementation method (with the mask layer plug-in) _ jquery-js tutorial

Source: Internet
Author: User
This article mainly introduces the implementation method of the jQuery mask layer, and analyzes the style and function implementation skills of the jQuery mask layer in detail based on the instance form, A simple jQuery mask layer plug-in implementation method is provided. If you need it, you can refer to the examples in this article to analyze the implementation method of the jQuery mask layer. We will share this with you for your reference. The details are as follows:

1. Background translucent mask layer style

A black (or other) background is required and must be set to absolute positioning. The following is the css style used in the project:

/* Translucent Mask Layer */# overlay {background: #000; filter: alpha (opacity = 50);/* IE transparency */opacity: 0.5; /* Transparency */display: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 100; /* The layer here must be greater than the page */display: none ;}

2 jQuery implementation mask

/* Display the Mask Layer */function showOverlay () {$ ("# overlay "). height (pageHeight (); $ ("# overlay "). width (pageWidth (); // The first parameter of fadeTo is speed, and the second parameter is transparency. // you can control transparency in multiple ways to ensure compatibility, but it also brings about the trouble of modifying $ ("# overlay "). fadeTo (200, 0.5);}/* hidden cover layer */function hideOverlay () {$ ("# overlay "). fadeOut (200);}/* Current page height */function pageHeight () {return document. body. scrollHeight;}/* Current page width */function pageWidth () {return document. body. scrollWidth ;}

3 prompt box

The purpose of the mask is nothing more than making it impossible to operate the content, highlighting the prompt box, and the prompt box can refer to the above preparation, z-index is higher than the mask layer. The main problem is how to control the prompt box centered in the browser.

/* Go to the page center */function adjust (id) {var w = $ (id ). width (); var h = $ (id ). height (); var t = scrollY () + (windowHeight ()/2)-(h/2); if (t <0) t = 0; var l = scrollX () + (wxwwidth ()/2)-(w/2); if (l <0) l = 0; then (id).css ({left: l + 'px ', top: t + 'px'});} // function compute wheight () {var de = document.doc umentElement; return self. innerHeight | (de & de. clientHeight) | document. body. clientHeight;} // The Width function of the browser's viewport using wwidth () {var de = document.doc umentElement; return self. innerWidth | (de & de. clientWidth) | document. body. clientWidth}/* vertical scroll position of the browser */function scrollY () {var de = document.doc umentElement; return self. pageYOffset | (de & de. scrollTop) | document. body. scrollTop;}/* horizontal scroll position of the browser */function scrollX () {var de = document.doc umentElement; return self. pageXOffset | (de & de. scrollLeft) | document. body. scrollLeft ;}

Supplement:

JQuery simple mask layer Plugin:

JQuery code:

(Function ($) {$. fn. showMask = function (options) {var defaults = {top: 150, left: 200} var options = $. extend (defaults, options); $ ("html "). append ('

The operation is in progress. Please wait ......

') _ This _ = $ ("# ui-mask"); _ this _. height ($ (document ). height () _ this _. show () ;}; $. fn. hideMask = function (options) {_ this _ = $ ("# ui-mask"); _ this _. remove () ;};}) (jQuery );

Css style:

#ui-mask{  background-color: #666;  position: absolute;  z-index: 9999;  left: 0;  top: 0;  display: none;  width: 100%;  height: 100%;  opacity: 0.5;  filter: alpha(opacity=50);  -moz-opacity: 0.5;}#ui-mask-p img{  width: 50px;  height: 50px;  float: left;}#ui-mask-p span{  height: 50px;  line-height: 50px;  display: block;  float: left;  color: Red;  font-weight: bold;  margin-left: 5px;}

Usage:

function btn_save(){  $(this).ShowMask();  $.post('url',null,function(d,s){    $(this).HideMask();  });}

I hope this article will help you with jQuery programming.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.