消息框Message

可任意添加文本元素，自定义图标，消息框内添加data-close-message属性的元素会触发关闭

<div class="message">
    <i data-close-message></i>
    <p><i class="flaticon-information59 mr3"></i>We just need a little more info to create your account. <a href="#">link text</a></p>
</div>

Benefits of registration include:

<div class="message">
    <i data-close-message></i>
    <h5>Benefits of registration include:</h5>
    <ol class="baselist">
        <li>Exclusive offers & sneak peeks</li>
        <li>Instant order tracking</li>
        <li>Award-winning customer service</li>
    </ol>
    <button type="button" class="btn xs" data-close-message>Close</button>
</div>

场景Scenes

添加class="info"、class="correct"、class="warning"、class="error"转换为不同场景

<div class="message info">
    <i data-close-message></i>
    <p><i class="flaticon-information59 mr3"></i>We just need a little more info to create your account. <a href="#">link text</a></p>
</div>
<div class="message correct">
    <i data-close-message></i>
    <p><i class="flaticon-verification16 mr3"></i>Your account has been created successfully. <a href="#">link text</a></p>
</div>
<div class="message warning">
    <i data-close-message></i>
    <p><i class="flaticon-exclamation26 mr3"></i>Your username or password is incorrect. <a href="#">link text</a></p>
</div>
<div class="message error">
    <i data-close-message></i>
    <p><i class="flaticon-prohibition18 mr3"></i>The passwords you entered do not match. <a href="#">link text</a></p>
</div>

弹出Pop up

为触发元素添加data-open-message属性，并用其来绑定消息框内容，添加name属性的消息框会自动隐藏，添加class="mask"属性使消息框弹出位置是悬浮的

Click Button:
<button type="button" class="btn" data-open-message="element1">Default</button>
<button type="button" class="btn" data-open-message="element2">Mask</button>
Default:
<div name="element1" class="message">
    <i data-close-message></i>
    <h5>Benefits of registration include:</h5>
    <ol class="baselist">
        <li>Exclusive offers & sneak peeks</li>
        <li>Instant order tracking</li>
        <li>Award-winning customer service</li>
    </ol>
</div>
Mask:
<div name="element2" class="message mask">
    ...
</div>

相同name属性值的消息框将会绑定为同一个序列组

Click Button:
<button type="button" class="btn" data-open-message="array1">Array</button>
Message:
<div name="array1" class="message info mask">
    <i data-close-message></i>
    <h5>Benefits of registration include:</h5>
    <ol class="baselist">
        <li>Exclusive offers & sneak peeks</li>
        <li>Instant order tracking</li>
        <li>Award-winning customer service</li>
    </ol>
</div>
<div name="array1" class="message correct mask">
    ...
</div>
<div name="array1" class="message warning mask">
    ...
</div>
<div name="array1" class="message error mask">
    ...
</div>

超时关闭Close Timeout

添加data-close-timeout属性设定消息框的超时关闭时间，单位是ms毫秒，可设定的最小值为500

Click Button:
<button type="button" class="btn" data-open-message="array2">Array</button>
Message:
<div name="array2" class="message info mask" data-close-timeout="2000">
    <i data-close-message></i>
    <h5>Benefits of registration include:</h5>
    <ol class="baselist">
        <li>Exclusive offers & sneak peeks</li>
        <li>Instant order tracking</li>
        <li>Award-winning customer service</li>
    </ol>
</div>
<div name="array2" class="message correct mask" data-close-timeout="2500">
    ...
</div>
<div name="array2" class="message warning mask" data-close-timeout="3000">
    ...
</div>
<div name="array2" class="message error mask" data-close-timeout="3500">
    ...
</div>

自定义风格Custom Style

可以使用自定义风格工具快速创建CSS

<div class="message mystyle">
    ...
</div>
<div class="message info mystyle">
    ...
</div>
<div class="message correct mystyle">
    ...
</div>
<div class="message warning mystyle">
    ...
</div>
<div class="message error mystyle">
    ...
</div>