Dialog 对话框

将一个任务告知给用户，它承载了一些需要用户进行确认的关键信息或者多个任务。

触发器添加 data-toggle="modal" 和 data-target="#modal-example"，其中 data-target="" 对应 Dialog 对话框的 id。

<!-- 按钮触发事件 -->
<a href="javascript:void(0);" data-toggle="modal" data-target="#modal-example">
    点击触发Dialog
</a>

<!-- Dialog -->
<div class="h5ui-dialog" id="modal-example" tabindex="-1" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog middle">
        <div class="modal-content">
            <div class="modal-header">
                我是Dialog
            </div>
        </div>
    </div>
</div>

标题 + 双操作

<div class="h5ui-dialog" id="modal-title-two_button" tabindex="-1" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog middle">
        <div class="modal-content">
            <div class="modal-header">
                确认要删除评论？
            </div>
            <div class="modal-footer clearfix">
                <a href="javascript:void(0);" class="btn" data-dismiss="modal">取消</a>
                <button type="button" class="btn active" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>

标题 + 内容 + 双操作

<div class="h5ui-dialog" id="modal-title-content-two_button" tabindex="-1" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog middle">
        <div class="modal-content">
            <div class="modal-header">
                温馨提示
            </div>
            <div class="modal-body">
                温馨提示内容
            </div>
            <div class="modal-footer clearfix">
                <a href="javascript:void(0);" class="btn" data-dismiss="modal">取消</a>
                <button type="button" class="btn active" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>

标题 + 内容 + 单操作

<div class="h5ui-dialog" id="modal-title-content-one_button" tabindex="-1" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog middle">
        <div class="modal-content">
            <div class="modal-header">
                提示
            </div>
            <div class="modal-body">
                账号在别的设备上登录，你被迫下线！
            </div>
            <div class="modal-footer clearfix">
                <button type="button" class="btn btn-block active" data-dismiss="modal">知道了</button>
            </div>
        </div>
    </div>
</div>

标题 + 输入框 + 双操作

<div class="h5ui-dialog" id="modal-title-form-two_button" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog middle">
        <div class="modal-content">
            <div class="modal-header">
                请输入网址
            </div>
            <div class="modal-body">
                <div class="form-hairlines">
                    <input type="text" id="user-name" class="h5ui-form-input" placeholder="http://h5ui.io">
                </div>
            </div>
            <div class="modal-footer clearfix">
                <a href="javascript:void(0);" class="btn" data-dismiss="modal">取消</a>
                <button type="submit" class="btn active" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>

上一页List 列表下一页Modal 模态对话框

最后更新于1年前