Simple and practical mobile end js-mobile layer

Source: Internet
Author: User

Company Touch screen version of the development has been completed, this article with you introduce a simple and practical mobile-side JS to achieve the mask effect, mobile layer. This mobile-side JS implementation of simple, small size is very suitable for mobile development, and can customize the style of hints. Here are a few simple demo

1. General Information box, and set 2 seconds to automatically close, the code is as follows:

Layer.open ({    content: ' Set the style you want by style ', style    : ' Background-color: #09C1FF; color: #fff; border:none; ',    Time:2});

2. the Prompt box, and customize the title style, the code is as follows:

Layer.open ({    title: [        ' I am the title ',        ' background-color: #8DCE16; color: #fff; '    ],    content: ' Title style any you define. '    });

3. a prompt box and displays 1 buttons:
Layer.open ({    content: ' Set the style you want by style ',    btn: [' OK ']});

4. The Inquiry box, which displays 2 buttons, does not allow the point matte to close, the code is as follows:

Layer.open ({    content: ' Do you want to confirm or do you want to cancel? ',    btn: [' Confirm ', ' Cancel '],    shadeclose:false,    yes:function () {        Layer.open ({content: ' You ordered confirmation ', time:1});    } , No:function () {        Layer.open ({content: ' You chose to cancel ', time:1});}    );

5. page layer, custom background, etc., the code is as follows:

Layer.open ({    type:1,    content: ' Space free play, here can be passed in HTML ',    style: ' width:240px; height:180px; padding:10px; Background-color: #F05133; Color: #fff; Border:none; '});


Simple to use simply introduce layer.m.js files and layer.css files.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Simple and practical mobile end js-mobile layer

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.