AJAX/jQueryを使用してポップアップページ

Question

私は私のエリア内のビジネスの場所を表示するための簡単なマップを開発しています。私は地図を保持するメインページ（map.php）を持っており、画像、レビューなどの特定のビジネスに関する詳細情報を表示するページ（business.php）も作成しました。

私はAJAX/jQueryを使用してこのページに動的にリンクするインフォボックス（インフォボックス）のリンクがあります。また、map.phpからbusiness.phpに選択されたビジネスの値（クリックされたアイコン）を表示したり操作したりできるようにしたいと考えています。私は簡単にURL上の値をPHPページに渡すことでそれを行うことができます。しかし、私はメインページを離れたくないので、ビジネスページをポップアップしたいだけです。これについてどうすればいいですか？これは、以下の私のJavaScriptコードです：ユーザーは、私はbusiness.phpページを動的にポップにしたい「表示詳細情報」リンクをクリックする

function getLocations (url) { 
    downloadUrl(url, function(data) { 
     var xml = data.responseXML; 
     var markers = xml.documentElement.getElementsByTagName("marker"); 

     for (var i = 0; i < markers.length; i++) { 
      var name = markers[i].getAttribute("name"); 
      var address = markers[i].getAttribute("address"); 
      var type = markers[i].getAttribute("type"); 
      var pic = markers[i].getAttribute("image"); 
      var link = markers[i].getAttribute("link"); 
      var details = markers[i].getAttribute("details"); 
      var point = new google.maps.LatLng(
       parseFloat(markers[i].getAttribute("lat")), 
       parseFloat(markers[i].getAttribute("lng")) 
      ); 

      var html = "<div id='content'>" + name + "</b> <br />" + '<img src="' + pic + '"/>' + " </b> <br/>" + address + '</b> <br /> <a href="business.php">View More Information</a></div>'; 
      var icon = customIcons[type] || {}; 
      var marker = new MarkerWithLabel({ 
       position: point, 
       draggable: false, 
       raiseOnDrag: false, 
       map: map, 
       labelContent: type, 
       labelAnchor: new google.maps.Point(30, 65), 
       labelClass: "labels", // the CSS class for the label 
      }); 
      bindInfoWindow(marker, map, infoWindow, html); 
     } 
    }); 
} 

。

Answer 1

これらのリンクを「ハイジャックス」する必要があります。

// When clicking any link 
$('a').live('click', function (e) { 
    var clicked = $(this); 

    // Make sure a bussiness.php-link was clicked 
    if (clicked.attr('href').indexOf('business.php') != -1) { 
     // Grab the page with ajax 
     $.get(clicked.attr('href'), function (data) { 
      alert(data); 
     }); 

     return false; 
    } 
}); 

編集：私は考えることができる最も簡単な方法は、このようなものであるあなたが最も可能性が高いたくはライトボックスや凝っにアラートを（）変更します。

Answer 2

正しい答えはです。これはに依存します。その情報をどのように表示したいですか？新しいウィンドウを開くか、まったく表示しませんか？

1. したい場合は/必要性/ちょうど<a>タグのtarget属性を使用して、新しいウィンドウを開くのが好き。このように：<a href="business.php" target="business">View More Information</a>。 targetは、開くウィンドウの名前です（hereなど）。あなたは、（位置、サイズなど）好きな場合は、javascriptでそのウィンドウを操作することもできます。これは技術的にはポップアップなので、クライアントのブラウザ構成の中にはそのようなものがありません。あなたが同じページ上business.phpを表示したい場合

   一方

2. 、あなたあなたが（バックグラウンドで元のページを見ることができるようになります埋め込まれたIFRAMEとfancyboxまたはlightbox様のソリューションを使用します淡色表示でアクセス不可能）、ビジネスページが表示されます。あなたはあなたのページのcreaftinfによってiframeなしで立ち去ることができるので、business.phpページにajaxをロードして、div/whateverの内容を新しいhtmlに置き換えます。

3. あなたもあり多くのオプションがあり、あなたは慎重にあなたの要件に、各ソリューションの適用可能性に基づいて使用するかを調べる必要があり

など、business.phpページをレンダリングするために、ダイナミックのiframeを作成することができます（例えば、新しいウィンドウが開かないようにするとどうなるか）。