如何将信息页面显示为新的“图层”?

时间:2012-05-29 11:57:42

标签: javascript jquery

我的网站上有一个联系人链接,我不想添加简单的超链接,因为我的联系信息大约是5-6行文本。

点击后我希望它出现在我点击链接的页面上,但是在窗口(NO POPUP)之类的东西 - 只是在一个带有关闭按钮的更高层上。我已经用Jquery.animate制作了它,因为facebook喜欢按钮来自屏幕后面 - 但现在我想要一些不同的东西:]。

怎么做?

2 个答案:

答案 0 :(得分:1)

不同?

试试这个:

<button onclick="alert('Address: blah blah Phone: 00blah')">Contact Info</button>

开个玩笑:),你可以查看jquery ui对话框:

http://jqueryui.com/demos/dialog/

用于“不同”的东西

答案 1 :(得分:1)

这是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/