效果體驗：
http://hovertree.com/texiao/jqueryui/1/
這是第一種實現方法，還有使用iframe的方法，在後面有例子。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>jquery ui打開url網址的對話框--何問起</title>
<link rel="stylesheet" href="http://hovertree.com/jqueryui/jquery-ui.min.css" />
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.4.min.js"></script>
<script src="http://hovertree.com/jqueryui/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".hovertreeopen").click(function () {
$.get($(".hovertreeopen").attr("href"), function (result) {
$("#hovertreeurl").html(result);
$('#hovertreeurl').dialog({
width: 600, height: 400, modal: true
});
});
return false;
});
})
</script>
<style type="text/css">
#hovertreeurl {
display: none;
}
a{color:blue;}
</style>
</head>
<body>
<div style="width:338px;height:100px;margin:50px auto;">
<a href="http://hovertree.com/texiao/hewenqi/" target="_self" class="hovertreeopen">點我</a>
<br />這是一個鏈接，鏈接到 <a href="http://hovertree.com/texiao/hewenqi/" target="_blank">http://hovertree.com/texiao/hewenqi/</a> ，使用jQueryUI，當點擊鏈接是，彈出對話框，對話框顯示的是鏈接頁面的內容。只有關閉對話框框後才能點擊頁面的其他內容。
</div>
<div id="hovertreeurl" title="div層對話框">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
<p>何問起：這是一個彈出div層對話框，可用於顯示信息。可以拖動和關閉這個彈出層，還可以改變它的大小。 </p>
</div>
<div style="max-width:960px;margin:0px auto;">
<a href="http://hovertree.com/h/bjag/f0wjbclw.htm" target="_blank">說明</a> <a href="http://hovertree.com/" target="_blank">何問起</a>
</div>
</body>
</html>
第二種方法例子：
http://hovertree.com/texiao/jqueryui/1/1.htm
參考：
http:///a/bjac/j4kedhuq.htm