会话窗Dialog

可任意添加多个会话窗，支持内容、文本、加载、图片四种内容模式，需要为触发元素添加data-open-dialog属性，并用其来绑定会话窗内容，会话窗内添加data-close-dialog属性的元素会触发关闭

Click Button:
<button type="button" class="btn" data-open-dialog="element1">Content</button>
Dialog:
<div id="element1" class="dialog">
    <div class="content">
        <h3 class="tc">h3. heading</h3>
        <p>Need to get some protection for your new smartphone or tablet?</p>
        <div class="tc"><button type="button" class="btn xs" data-close-dialog>Close</button></div>
    </div>
    <i data-close-dialog></i>
</div>

文本Text

内容层修改为class="text"转换为文本会话窗，此会话窗点击外部不会触发关闭

Click Button:
<button type="button" class="btn" data-open-dialog="element2">Text</button>
Dialog:
<div id="element2" class="dialog">
    <div class="text">
        <p>Need to get some protection for your new smartphone or tablet?</p>
        <button type="button" class="btn xs" data-close-dialog>Close</button>
    </div>
    <i data-close-dialog></i>
</div>

加载Loading

内容层修改为class="loading"转换为加载会话窗，此会话窗点击外部不会触发关闭

Click Button:
<button type="button" class="btn" data-open-dialog="element3">Loading</button>
Dialog:
<div id="element3" class="dialog">
    <div class="loading inverse">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
    </div>
    <i data-close-dialog></i>
</div>

图片Text

将触发元素的data-open-dialog属性绑定图片URL地址即转换为图片会话窗，需在地址前添加img@参数，此参数不会传进http之中，图片会在打开会话窗的时候开始加载

Click Button:
<button type="button" class="btn" data-open-dialog="img@imgurl">Image</button>

局部Partial

添加class="top"转换为顶部模式，添加class="bottom"转换为底部模式

Click Button:
<button type="button" class="btn" data-open-dialog="element4">Top</button>
<button type="button" class="btn" data-open-dialog="element5">Bottom</button>
Top:
<div id="element4" class="dialog top">
    <div class="text">
        <p>Text</p>
        <button type="button" class="btn xs" data-close-dialog>Close</button>
    </div>
    <i data-close-dialog></i>
</div>
Bottom:
<div id="element5" class="dialog bottom">
    ...
</div>