图标添加

 <style>
 <style>
-    .title {
+    .demo-page {
+        padding: 10px;
+    }
+
+    .demo-page .title {
         padding: 10px 0;
         padding: 10px 0;
     }
     }
 
 
-    .btn {
+    .demo-page .btn {
         margin-bottom: 10px;
         margin-bottom: 10px;
     }
     }
 
 
-    .demo-page {
-        padding: 10px;
-    }
 
 
-    .icon_lists span{  
+    .demo-page .icon_lists span{  
         float: left;
         float: left;
         width: 50px;
         width: 50px;
         height: 30px;
         height: 30px;
@@ -19,19 +20,19 @@
         margin-top: 10px; 
         margin-top: 10px; 
     }
     }
 
 
-    .modality {
+    .demo-page .modality {
         color: #219dd6;
         color: #219dd6;
     }
     }
 
 
-    .modality span{
+    .demo-page .modality span{
         font-size: 20px;
         font-size: 20px;
     }
     }
 
 
-    .sort {
+    .demo-page .sort {
         color: #999;
         color: #999;
     }
     }
 
 
-    .sort span {
+    .demo-page .sort span {
         font-size: 20px;
         font-size: 20px;
     }
     }
 </style>
 </style>
@@ -54,6 +55,10 @@
         <span class="btn disable">不可点按钮</span>
         <span class="btn disable">不可点按钮</span>
         <span class="btn red">红色按钮</span>
         <span class="btn red">红色按钮</span>
         <span class="btn white">白色按钮</span>
         <span class="btn white">白色按钮</span>
+
+        <span class="btn alert-btn">alert</span>
+        <span class="btn red confirm-btn">confirm</span>
+        <span class="btn white dialog-btn">dialog</span>
         
         
         <p class="title">4. 提示文字或者某些链接文字颜色</p>
         <p class="title">4. 提示文字或者某些链接文字颜色</p>
         <span class="blue">提示文字</span>
         <span class="blue">提示文字</span>

-<span class="iconfont">&#xe762;</span>
+<span class="iconfont">&#xe762;</span>

-<span class="iconfont">&#xe657;</span>
+<span class="iconfont">&#xe657;</span>

@@ -16,7 +16,7 @@ var tpl =
     '<div class="yoho-dialog {{className}} hide">' +
     '<div class="yoho-dialog {{className}} hide">' +
         '{{#if closeIcon}}' +
         '{{#if closeIcon}}' +
             '<span class="close">' +
             '<span class="close">' +
-                '<i class="iconfont">&#xe602;</i>' +
+                '<i class="iconfont">&#xe608;</i>' +
             '</span>' +
             '</span>' +
         '{{/if}}' +
         '{{/if}}' +
         '<div class="content">' +
         '<div class="content">' +
@@ -93,8 +93,8 @@ Dialog.prototype.close = function() {
 Dialog.prototype.show = function() {
 Dialog.prototype.show = function() {
     this.$mask && this.$mask.removeClass('hide');
     this.$mask && this.$mask.removeClass('hide');
     this.$el.removeClass('hide').css({
     this.$el.removeClass('hide').css({
-        'margin-top': -this.$el.height() / 2,
-        'margin-left': -this.$el.width() / 2
+        'margin-top': -this.$el.outerHeight() / 2,
+        'margin-left': -this.$el.outerWidth() / 2
     });
     });
 };
 };
 
 

 var $ = require('yoho-jquery'),
 var $ = require('yoho-jquery'),
-    lazyLoad = require('yoho-jquery-lazyload');
+    lazyLoad = require('yoho-jquery-lazyload'),
+    dialog = require('../common/dialog');
+
+var _dialog = dialog.Dialog,
+    _alert = dialog.Alert,
+    _confirm = dialog.Confirm;
+
+$('.alert-btn').click(function() {
+    new _alert('购买成功<br>进入 个人中心>我的订单<br>查看门票信息').show();
+});
+
+$('.confirm-btn').click(function() {
+    new _confirm({
+        content: '确定要删除？',
+        cb: function() {
+            console.log('您点击了confirm确认');
+        }
+    }).show();
+});
+
+$('.dialog-btn').click(function() {
+    var tip = new _dialog({
+        className: 'settled-success',
+        content: '<h1 class="main-title">恭喜您已提交成功</h1><h2 class="sub-title">我们将尽快与您联系</h2>',
+        btns: [
+            {
+                id: 'apply',
+                btnClass: ['apply'],
+                name: '订阅',
+                cb: function() {
+                    tip.close();
+                }
+            },
+            {
+                id: 'cancel',
+                btnClass: ['cancel'],
+                name: '取消订阅',
+                cb: function() {
+                    tip.close();
+                }
+            }
+        ]
+    }).show();
+});
 
 
 lazyLoad($('img.lazy'));
 lazyLoad($('img.lazy'));

@@ -196,6 +196,15 @@ a {
     -moz-osx-font-smoothing: grayscale;
     -moz-osx-font-smoothing: grayscale;
 }
 }
 
 
+.body-mask {
+    position: absolute;
+    z-index: 100;
+    background: #1d1d1d;
+    opacity: 0.3;
+    top: 0;
+    left: 0;
+}
+
 .block {
 .block {
     display: block;
     display: block;
 }
 }

+.yoho-dialog {
+    position: fixed;
+    padding: 40px;
+    top: 50%;
+    left: 50%;
+    min-height: 130px;
+    min-width: 420px;
+    background: #f8f8f8;
+    z-index: 1001;
+    border: 1px solid #8f8f8f;
+
+    .close {
+        padding: 5px;
+        text-align: center;
+        position: absolute;
+        top: 14px;
+        right: 14px;
+        cursor: pointer;
+
+        > * {
+            font-size: 16px;
+            margin: 0;
+        }
+    }
+
+    .content {
+        text-align: center;
+    }
+
+    .btns {
+        padding: 15px 0;
+        text-align: center;
+    }
+
+    .alert-sure {
+        background: #1b1b1b;
+        color: #fff;
+    }
+
+    .confirm-sure {
+        background: #1b1b1b;
+        color: #fff;
+    }
+
+    .confirm-cancel {
+        background: #f8f8f8;
+        color: #1b1b1b;
+    }
+
+    .btn {
+        display: inline-block;
+        width: 130px;
+        height: 30px;
+        line-height: 30px;
+        font-size: 14px;
+        text-align: center;
+        border: 1px solid #1b1b1b;
+        cursor: pointer;
+        margin-left: 10px;
+
+        &:first-child {
+            margin-left: 0;
+        }
+    }
+
+    &.alert-dialog .content,
+    &.confirm-dialog .content {
+        width: 350px;
+        height: auto;
+        min-height: 90px;
+        overflow: hidden;
+        line-height: 20px;
+        position: relative;
+        padding-top: 40px;
+        padding-bottom: 20px;
+
+        p {
+            position: absolute;
+            left: 0;
+            bottom: 25px;
+            width: 100%;
+            color: #444;
+            line-height: 25px;
+        }
+
+        div {
+            position: absolute;
+            top: 0;
+            left: 100px;
+            padding-top: 30px;
+            font-size: 22px;
+            font-weight: bold;
+            width: 150px;
+            height: 30px;
+            line-height: 30px;
+            margin: 0 auto;
+
+            span {
+                background: url(/cart/del.png);
+                float: left;
+                width: 27px;
+                height: 30px;
+            }
+        }
+    }
+
+    &.subcontent-dialog {
+        padding: 30px 0;
+
+        .content {
+            font-weight: bold;
+            margin: 0 auto 30px;
+        }
+
+        .sub-content {
+            text-align: center;
+            font-size: 12px;
+            color: #555;
+            margin-left: 5px;
+            margin-bottom: 5px;
+        }
+
+        .btn {
+            margin-top: 25px;
+            width: 100px;
+            font-size: 13px;
+            margin-left: 0;
+            margin-right: 0;
+
+            &.black {
+                background-color: #000;
+                color: #fff;
+            }
+        }
+    }
+}

 @import "header";
 @import "header";
 @import "sign-header";
 @import "sign-header";
 @import "footer";
 @import "footer";
+@import "dialog";