效果體驗：
http://hovertree.com/texiao/layer/4/
完整的HTML代碼如下：<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{margin: 0;padding: 0;}
.doc{width: 160px;margin: 0 auto;}
.doc h2{font-size: 20px;margin: 20px;}
.doc button.btn{margin: 40px auto;height: 30px;line-height: 30px;font-size: 16px;border-radius: 3px;margin-left: 10px;min-width: 100px;border: none;color: #fff;font-size: 14px;cursor: pointer;}
.doc button.open{background: #651E7E;}
.doc button.close{background: #DDB0EC;border: 1px solid #DDB0EC;}
#hovertreetips{color:orangered;}
</style>
<link href="http://hovertree.com/texiao/layer/4/css/dialog.css" rel="stylesheet"/>
<link href="http://hovertree.com/texiao/layer/4/css/dialog-theme.css" rel="stylesheet" type="text/css">
<title>jQuery可拖拽對話框彈出層代碼 - 何問起</title><base target="_blank" />
</head>
<body>
<div class="doc">
<div class="btns">
<button class="open btn" id="open">點擊我彈出層</button>
</div>
<div id="hovertreetips"></div>
</div>
<div class="dialog-demo-box" style="display:none;"></div>
<script src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js"></script>
<script src="http://hovertree.com/texiao/layer/4/js/dialog.js"></script>
<script>
$(function(){
$("#open").click(function(){
var $d = $(".dialog-demo-box");
$d.dialog({
title: '何問起', // title
dragable:true,
html: '', // html template
width: 400, // width
height: 200, // height
cannelText: '取消', // cannel text
confirmText: '確認', // confirm text
showFooter:true,
onClose: function(){ // colse callback
//alert('你點了關閉按鈕!');
$("#hovertreetips").text("點擊了 關閉 按鈕");
},
onOpen: false, // open callback
onConfirm: function() { // confirm callback required
//alert('你點了確認按鈕!');
$("#hovertreetips").text("點擊了 確認 按鈕");
$d.dialog().close();
},
onCannel: function(){ // Cannel callback
// alert('你點了取消按鈕!');
$("#hovertreetips").text("點擊了 取消 按鈕");
},
getContent:function(){ // get Content callback
$d.find('.body-content').html('何問起專注於提供免費網頁特效，Web前端教程，C#開源項目等開發學習內容。');
}
}).open();
});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>適用浏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>來源：<a href="http://hovertree.com" target="_blank">何問起</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/ovrqs553.htm">原文</a></p>
</div>
</body>
</html>