Google マップを使用する場合、地図上のマーカーをクリックすると、ウィンドウがポップアップします。携帯電話番号を入力して、Google から SMS を受信することもできます。JqueryまたはJqueryプラグインを使用してそのポップアップウィンドウを生成する方法は?
2 に答える
私は、Google マップはあなたが望む効果の単なる例であり、あなたのプロジェクトベースではないと仮定しています:
これは、特定の div を表示し、後で非表示にすることに他なりません。
$("a.popup1").click(function(e){
e.preventDefault();
$("div.popup1").toggle();
});
-
<a class="popup1" href="enable-javascript.html">Show Popup</a>
<div class="popup1"><p>This is where your data goes.</p></div>
-
Google マップが実際のプロジェクト ベースである場合は、jQuery Google マップ プラグインであるjMapsを確認することをお勧めします。マーカーと pointHTML (あなたが話しているウィンドウ) を追加する例は、次の場所にあります: http://github.com/digit...Google.Markers.AddMarker.html
さまざまなバリエーションがありますが、基本的には次のようにします。
- まず、ドキュメント(またはサイトの外観によってはコンテナ要素)に「div」を追加します。
- AJAXトランザクションを実行して、小さなポップアップのコンテンツをフェッチします(すでにどこかに隠されているページにコンテンツがない場合)
- divに適切なCSSを与えますuwantクラス属性で好きなようにスタイルを設定します(重要なのは、それを表示するためです:-)
ポップアップボックスに含める必要があるものの中には、ボタンを削除できるようにするためのボタンやその他のコントロールがあります。jQuery offset()関数を使用して、クリックされたもののページ位置を見つけ、位置情報(左上隅)を使用してフローティング要素を配置できます。フローティング要素は、おそらく絶対位置で配置し、周囲のコンテンツよりも大きい「z-index」値を指定する必要があります。
これをどのように行うかは、サイトがどのように見えるか、他のコンテンツがどのように配置および配置されるか、ポップアップのコンテンツをどのように取得/合成するかに大きく依存します。