<!-- 触发模态弹框的按钮 -->
<!-- 必须有data-target属性，而且其值必须是 # + 模态弹框的id值 -->
<button type="button" id="btn" data-target="#modal">模态框</button>
<!-- 触发模态弹框的按钮 结束-->

<!-- 模态弹框 -->
<div class="modal hide" id="modal" data-dismiss="true" >
    <div class="modal-inner">
        <!-- 模态弹框头部 -->
        <header class="modal-header">
            <h2 class="header-title">修改课程</h2>
            <!-- 点击设置了data-dismiss属性的元素，能使模态弹框隐藏 -->
            <span class="del" data-dismiss="true">x</span>
        </header>
        <!-- 模态弹框头部 结束-->
        <!-- 模态弹框内容区 -->
        <div class="modal-content">
            <div class="content-inner">
                <p>你好呀！！</p>
            </div>
        </div>
        <!-- 模态弹框内容区 结束-->
        <!-- 模态弹框尾部 -->
        <footer class="modal-footer">
            <button type="button" class="btn">确定</button>
            <button type="button" class="btn">取消</button>
        </footer>
        <!-- 模态弹框尾部 结束-->
    </div>
</div>

<script>
/**
 * @desc 模态弹框对位接口
 * @param opts 配置对象
 * @example {
 * modal: document.getElementById('modal')
 * target: document.getElementById('btn')
 * draggable: true
 * }
 * 选项说明
 * modal: 必选，指模态弹框
 * target: 必选，触发模态弹框显示的元素，此元素必须有data-target属性，并且其属性值为 # + 对应的模态弹框的id值，例：data-target="#modal"
 * draggable: 可选，是否能拖拽模态弹框，默认为false
 * 补充：
 * 如果点击某个按钮，想让模态弹框消失，可以为此元素添加 data-dismiss="true"
 */

// 调用
modal({
  modal: document.getElementById('modal'),
  target: document.getElementById('btn'),
  draggable: true
})
</script>