Self-clothed, H5 mobile phone-side jquery popup plug-in (event bubbling, singleton mode, hiding part of the default scrolling)

Thanks for browsing, welcome to Exchange =. =

Company development Web pages need to use pop-up windows, the use of Jquery-ui custom download still need more than 150 KB, want some luxury (finally down only 11kb, compression 2kb, ah, my God),

Mobile phone side pop-up windows and PC side somewhat different, and the phone has a pop-up window rolling with the parent page scrolling interaction problems,

So decided to write a plug-in, specifically against the mobile phone page pop-up window.

The Mask and dialog two parts of the pop-up window are made into position=fixed, which prefers this effect and masks the scrolling of the masked part.

Several points of knowledge or difficulties that need attention:

1. Event bubbling:

E.preventdefault () blocks event default behavior.

Event.stoppropagation (); Prevent event bubbling

return False in jquery is equivalent to calling both E.preventdefault () and E.stoppropagation ()

Return false prevents event bubbling in addition to blocking the default behavior. If you have a jquery source code on hand, you can see the following code:
if (Ret===false) {
Event.preventdefault ();
Event.stoppropagation ();
}

2.js single-Case notation:

The use of closures of this feature can achieve some pleasant results, plug-ins in Singlemask and Singledialogmanager are used in a single case, the code can be summarized as follows:

3. The calculation of the window and the height of the interior width, feel sometimes write this code really need to take a piece of paper to draw.

4. About scroll bar roll to top and bottom

Elem.clientheight + Elem.scrolltop-elem.scrollheight = = 0 To determine if the scroll bar is to the bottom

Elemdialogcontent.scrolltop = = 0 To determine if the scroll bar is at the top

5. About Touchstart,touchmove,touchend getting touch points

E.originalevent.touches is an array that describes multiple touch events

After touching the Touchstart event will trigger scrolling, so here Touchmove event monitoring Touches[touches.length-1] This object

6. Combined with the above 4 and 5, you can control its response to scrolling and block the default scrolling behavior by E.preventdefault (). The core code is as follows:

Code Show: Jquery.dialog.js

Dialog.css

Page Call Code:

$ ("#test-btn"). Bind ({//Popup code
"Touchstart": function () {
$ ("#test-dialog"). Dialog ({
Title: "Pop Window Test",
width:1000,
height:1000
});
return false;
}
})

$ ("#test-dialog"). Dialog ({"Close": true})//Close Code

Final effect:

The code is on GitHub:

All day with others open source, we also open-source bar: Https://github.com/SoulRIver2015/jquery-plugins/tree/master/mobile/river/dialog

Self-clothed, H5 mobile phone-side jquery popup plug-in (event bubbling, singleton mode, hiding part of the default scrolling)