您的位置:首页 - 教程 - 网页特效 - 正文
jquery ui打开url网址的对话框
效果体验:
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://keleyi.com/a/bjac/j4kedhuq.htm

评论: