我的网站上有一个联系链接,我不想添加简单的超链接,因为我的联系信息大约是 5-6 行文本。
单击后,我希望它出现在我单击链接的页面上,但在窗口(无弹出窗口)之类的地方 - 只是在带有关闭按钮的更高层上。我已经用 Jquery.animate 做到了,facebook like 按钮来自屏幕后面——但现在我想要一些不同的东西:]。
怎么做?
我的网站上有一个联系链接,我不想添加简单的超链接,因为我的联系信息大约是 5-6 行文本。
单击后,我希望它出现在我单击链接的页面上,但在窗口(无弹出窗口)之类的地方 - 只是在带有关闭按钮的更高层上。我已经用 Jquery.animate 做到了,facebook like 按钮来自屏幕后面——但现在我想要一些不同的东西:]。
怎么做?
这是 HTML:
<a id="mci">My Contact Info</a>
<div id="info_box">
<h1>This is contact info box</h1>
<a id="info_box_close">Close</a>
</div>
这是CSS:
#info_box {
display:none;
position:fixed;
height:300px;
width:300px;
background:#EEEEEE;
left: 50px;
top: 50px;
z-index:100;
margin-left: 15px; }
#info_box_close {
font-size:20px;
right:5px;
top:5px;
position:absolute;
color:red;
font-weight:bold;
}
最后,Jquery:
<script type="text/javascript">
$(document).ready( function() {
$('#mci').click( function() {
$('#info_box').fadeIn("slow");
});
$('#info_box_close').click( function() {
$('#info_box').fadeOut("slow");
});
});
</script>
工作示例:http: //jsfiddle.net/wJzTh/
不同的?
尝试这个:
<button onclick="alert('Address: blah blah Phone: 00blah')">Contact Info</button>
开个玩笑:),您可能会检查 jquery ui 对话框:
http://jqueryui.com/demos/dialog/
对于“不同”的东西