一步步开发自己的博客 .NET版（10、前端对话框和消息框的实现）

关于前端对话框、消息框的优秀插件多不胜数。造轮子是为了更好的使用轮子，并不是说自己造的轮子肯定好。所以，这个博客系统基本上都是自己实现的，包括日志记录、响应式布局、评论功能等等一些本可以使用插件的。好了，废话不多时。我们来实现自己的对话框和消息框。

要求：可拖动、点击按钮后可回调

• 画一个简单的模型框

<div class="hi-dialog-box clearfix">
        <div class="hi-dialog-title">系统提示</div>
        <div class="hi-dialog-content">
        </div>
        <div class="hi-dialog-foot">
            <input type="button" class="hi-dialog-determine" value="确定" />
            <input type="button" class="hi-dialog-cancel" value="取消" />
        </div>
</div>

 

• 添上基本的样式

 div.hi-dialog-box {
            border: 1px #808080 solid;
            width: 350px;
            height: 200px;                    
            border-radius: 3px;
        }

            div.hi-dialog-box div.hi-dialog-title {
                border: 1px #808080 solid;
                margin: 1px;
                padding: 1px;
                background-color: #dedcdc;
                height: 14%;
                cursor: move;
                font-size: 20px;
            }

            div.hi-dialog-box div.hi-dialog-content {
                height: 65%;
                margin: 5px;            
            }

            div.hi-dialog-box div.hi-dialog-foot {
                margin: 1px;
                padding: 1px;
                height: 14%;
            }

                div.hi-dialog-box div.hi-dialog-foot input {
                    float: right;
                    margin-left: 5px;
                    font-size: 16px;
                }

View Code