cool hit counter [Web] A very simple mobile web message box_Intefrankly

[Web] A very simple mobile web message box


Applies to. h5+jquery, best for mobile web

Recently in writing a simple public page, the front-end verification of some information to prompt, very simple needs really do not want to find any ready-made wheel, and not to use alert so rough, so wrote a very simple message box, the effect is shown in Figure.

Features.

  • With black layer masking
  • Click to disappear, either by tapping the message box or outside

Usage.

// Define the function。 Personally, I'm still used toPascalCase name
function MsgBox(msg,title) {
    $('<div onclick="$(this).remove();"style="z-index:9999;padding:10px;display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5)"><div><div style="color:#555;background-color:#DDD;font-size:0.8em;padding:3px;border-top-left-radius:5px;border-top-right-radius:5px;">' + (title === undefined ? ' prompt' : title) + '</div><div style="min-height:80px;min-width:250px;display:flex;justify-content:center;align-items:center;background-color:#F5F5F5;padding:20px;border-top:1px solid #BBB;border-bottom-left-radius:5px;border-bottom-right-radius:5px;text-align:justify">' + msg + '</div></div></div>')
        .appendTo($(document.body));
}

// use
MsgBox(' elements');           // The title is displayed as“ prompt”
MsgBox(' elements',' My title.'); // Custom Title

Feel free to tweet or recommend a better option.

-end-


Recommended>>
1、TypeScript 31 adds mappable tuple and array types
2、2018 Ticket Giveaway Underway 100 Free Event Tickets
3、Impact of information overload and asymmetry on forecasting
4、Is the Raspberry Pi really suitable for learning Linux systems
5、Introduction to Python 1 Birth and Nature

    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号