DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 網頁特效代碼 >> jquery ui打開url網址的對話框
jquery ui打開url網址的對話框
編輯:網頁特效代碼      日期:2017/4/13 10:10:48
效果體驗:
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
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved