Dialog标题

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

取消 确定
<div class="yo-dialog"> <header class="hd"> <h2 class="title">Dialog标题</h2> </header> <div class="bd"> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> </div> <footer class="ft"> <a href="#" class="yo-btn yo-btn-dialog yo-btn-l">确定</a> <a href="#" class="yo-btn yo-btn-dialog yo-btn-l">取消</a> </footer> </div>

dialog内容

取消 确定
<div class="yo-dialog"> <div class="bd"> <p>dialog内容</p> </div> <footer class="ft"> <a href="#" class="yo-btn yo-btn-dialog yo-btn-l">确定</a> <a href="#" class="yo-btn yo-btn-dialog yo-btn-l">取消</a> </footer> </div>

弹窗标题

dialog内容

取消 确定
<div class="yo-dialog"> <header class="hd"> <h2 class="title">弹窗标题</h2> </header> <div class="bd"> <p>dialog内容</p> </div> <footer class="ft"> <a href="#" class="yo-btn yo-btn-dialog yo-btn-l">确定</a> <a href="#" class="yo-btn yo-btn-dialog yo-btn-l">取消</a> </footer> </div>

Dialog

取消 保存

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

<div class="yo-dialog"> <header class="hd"> <h2 class="title">Dialog</h2> <span class="regret">取消</span> <span class="affirm">保存</span> </header> <div class="bd"> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> </div> </div>

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

dialog内容

<div class="yo-dialog"> <div class="bd"> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> <p>dialog内容</p> </div> </div>
@include yo-dialog(
    $name:default, //{default | String} dialog名称
    $width:default, //{default | Length | null} dialog宽度(值为null时,超过最小宽度则自适应)
    $height:default, //{default | Length} dialog高度
    $radius:default, //{default | Length} dialog圆角
    $shadow-opacity:default, //{default | Number} 阴影透明度
    $bordercolor:default, //{default | Color} dialog边框色
    $hd-height:default, //{default | Length} dialog头部高度
    $hd-bgcolor:default, //{default | Color} dialog头部背景色
    $title-color:default, //{default | Color} Dialog文本色
    $title-font-size:default, //{default | Length} Dialog字号
    $bd-padding:default, //{default | Length} dialog主体补白
    $bd-font-size:default //{default | Length} dialog主体字号
)