Building a complete Mobile project-Framing 7

The basic code has been completed, and now we need a little improvement.

First, in the upper right-hand corner There is a "detailed rule" string, we need to add an event--click and then pop up a mask layer, the mask layer inside a div, which wrote a variety of things. The bottom of the div is a hyperlink that you can then jump to. Click on the mask layer to make the mask layer disappear automatically, except for the div section.

Although this can be done with jquery a little bit, but here we need to deal with the module, the advantage is that you want to use the mask when the direct reference is good. So, first write a module:

1 window. Layer = (function () {2 3 var cssload = false;//represents whether CSS has been added4 var instance;//Mask Layer5 6 function init (layercontent) {7 if (!cssload) {8 //Style not added9 var style_str = ". Layer_mask {position:fixed; right:0; top:0; bottom:0; left:0; Background:rgba (0,0,0,.6); Z-index:1; height:100%; }.layer {position:fixed; right:0; top:0; bottom:0; left:0; z-index:99999; height:100%; display:none;} ";Ten var style_instance = document.createelement (' style '); One style_instance.innerhtml = style_str; A document.getelementsbytagname (' head ') [0].appendchild (style_instance); - cssload = true; -         } theReplace_content = '<DivID= "Layer_mask"class= "Layer_mask"></Div>' + layercontent; - if (!instance) { - instance = document.createelement (' div '); - Instance.setattribute (' class ', ' layer '); + var content = replace_content; - Document.body.appendChild (instance); +         } A instance.innerhtml = replace_content; at bindevent (); - Show (); - return instance; -     } - function Bindevent () { - var dom = document.getElementById (' Layer_mask '); in Dom.onclick = function () { - hide (); to         } +     } - function Show () { the instance.style.display = ' block '; *     } $ function Hide () {Panax Notoginseng instance.style.display = ' none '; -     } the return { + Init:init A     } the})()

Above is a mask layer of the module, as always, the first line exposes a global self-executing function, the module exposed.

Then declare two variables.

Creating a function, in the first if statement, is done once for the mask layer's CSS style, which is cssload when the variable is false. When the module's HTML code is written, we naturally need to have CSS at the same time, and this CSS is best to follow this module to load instead of loading on the home page, which can reduce the consumption of unnecessary resources.

In this if statement, the first sentence creates a style_str variable, writes all the CSS on the mask layer, and, of course, can write the CSS directly on the home page, then link the past and adjust. After the adjustment is complete, the CSS code in the link is copied all over, deleting the link.

Once created, create a style tag, then enter all of the CSS and load the node element into the head tag. Finally, the value of cssload is changed so that it does not load repeatedly.

The following replace_content variable represents "replace content", after all, the content of each mask layer is different, if the Mask Layer module content is fixed, then the module is meaningless, unless another module to inherit. Instead of being so troublesome, just let the module that needs to mask the layer itself provide the content, this mask layer module is only responsible for display, so it is perfect.

Of course, here can change only the text content, if you need to change all, you need to pass in at least 2 variables, one responsible for CSS code, a responsible text content. There is a need to find out for yourself, a little change is good.

Then the following if statement is the code to add the mask layer. To determine if the mask layer has not been loaded, create a mask layer div, give it various properties, here is to add a class property to it, and then put the div underneath the body to complete the load.

This is followed by entering the content into this div, calling the Bindevent and show methods, initiating event invocation and display.

Event Invocation method: simply clicking on a mask layer will start the hidden function. In addition, the bubbling cancellation is set here, otherwise clicking on the desired content will also trigger the event.

This is the end of the module.

Building a complete Mobile project-Framing 7