---
title: 弹出框
category: javascript
num: 2
---
{{#snippet}}
<div type="text/template" id="mbox-template" class="pop-win">
<div class="pop-main">
    <div class="hd">
        <h3>添加收藏</h3>
        <i class="icon-close close"></i>
    </div>
    <div class="con">
        <p>点评: 大渔铁板烧(印象城店)</p>
        <div class="btn-box">
            <span class="medi-btn">
                <a href="#" title="登录" class="stress-btn">提交</a>
            </span>

            <span class="medi-btn">
                <a href="#" title="取消" class="ordinary-btn">取消</a>
            </span>
        </div>
    </div>
</div>
</div>

<span class="medi-btn" style="margin-top:20px">
    <input type="button" value="点击打开" class="stress-btn" id="open_one" value="浅橙">
</span>

<script type="text/javascript">
    DP.provide("freezer::mbox",function(DP,Mbox){
        // content 参数接受String或DP.DOM类型
        var mbox = new Mbox({
            content: $("#mbox-template").html()
        });

        mbox.get("cont").all(".medi-btn").on("click",function(){
            mbox.close();
        });
        
        // 点击打开按钮
        $("#open_one").on("click",function(){
            // 弹出mbox
            mbox.open();
            // 返回false以阻止浏览器默认行为
            return false; 
        });
    });
</script>
{{/snippet}}