javascript - 情報ページを新しい「レイヤー」に表示するにはどうすればよいですか？

Question

私のウェブサイトに連絡先リンクがありますが、連絡先情報が約5〜6行のテキストであるため、単純なハイパーリンクを追加したくありません。

クリックした後、リンクをクリックしたページに表示したいのですが、ウィンドウ（ポップアップなし）のようなもので、閉じるボタンのある上位レイヤーに表示されます。私はすでにJquery.animateを使って、Facebookのようなボタンが画面の後ろから来ていることを確認しましたが、今は別のものが必要です：]。

どうやってするの？

Answer 1

違う？

これを試して：

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

冗談です:)、jquery uiダイアログボックスをチェックするかもしれません：

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

「違う」何かのために

Answer 2

これは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/