ほかのページに移動してもダイアログが消えないようにするには・・・

http://low-cost-travel.lk6.co/test109.php

■test109.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <title>jquery ipop_multi.jsのサンプル</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="./test109.js"></script>

	<script type="text/javascript">
		$(function() {
			$('#open1').click(function() {
				$("#mado1").ipop();
			} );

			if ($('#kwd').text() != '') {
				$('#open1').click();
			}

			
		});
	</script>
	<style type="text/css">
		.ipop {
			padding: 0;
			background-color: #fed;
			width: 300px;
			height: 200px;
			border: 1px solid #aaa;
			
			/* この３行は必須 */
			position: absolute;
			display: none;
			z-index: 9999;
		}
		.ipop_search {
			padding: 0;
			background-color: #fed;
			width: 300px;
			height: 400px;
			border: 1px solid #aaa;
			
			/* この３行は必須 */
			position: absolute;
			display: none;
			z-index: 9999;
		}
		.ipop_title {
			background-color: #fdc;
			cursor: move;
		}

		.ipop_close {
			cursor: pointer;
			float: right;
		}
	</style>
	<title>ポップアップウインドウテスト</title>
</head>
<body>
	<a href=./test109.php?id=1>テスト０</a><br>
	<?php
		if ($_GET["id"] == "1")
		{
			echo "テスト１<br>";
		}
	?>
	<input type='button' value='検  索' id='open1'>
	
	<div class="ipop_search" id="mado1">
		<div class="ipop_close">×</div>
		<div class="ipop_title">検索</div>
        		<?php
			echo "<form action='./test109.php' method='post'>";
				echo"<input type='text' name='keyword' style='width:240px;'><input type='submit' value='検索'>";
			echo "<form>";
    
			$keyword = $_POST['keyword'];
                    
			echo '<div id="kwd">'.$keyword.'</div>'; 
    
		?>
	</div>


</body>

</html> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ■test109.js

(function($) {
$.fn.ipop = function() {

	var $this = $(this);

	var wx, wy;		// ウインドウの左上座標
	var mx, my;		// マウスの座標

	// ウインドウの座標を画面中央にする。
	wx = $(document).scrollLeft() + ($(window).width() - $(this).outerWidth()) / 2;
	if (wx < 0) wx = 0;
	wy = $(document).scrollTop() + ($(window).height() - $(this).outerHeight()) / 2;
	if (wy < 0) wy = 0;

	// ポップアップウインドウを表示する。
	$this.css('top', wy).css('left', wx).fadeIn(100);

	// 閉じるボタンを押したとき
	$this.find('.ipop_close').click(function(){ $this.fadeOut(100);});

	// タイトルバーをドラッグしたとき
	$this.find('.ipop_title').mousedown(function(e) {
		mx = e.pageX;
		my = e.pageY;
		$(document).mousemove(mouseMove).mouseup(mouseUp);
		return false;
	});
	function mouseMove(e) {
		wx += e.pageX - mx;
		wy += e.pageY - my;
		$this.css('top', wy).css('left', wx);
		mx = e.pageX;
		my = e.pageY;
		return false;
	}
	function mouseUp() {
		$(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp);
	}
}

})(jQuery);

このプログラムでは検索のダイアログを開いてキーワードを入れて検索を
押せばダイアログが消えず結果が表示されるものとなっております。

検索のダイアログを開いてどのページに移動しても最初に開いた
検索のダイアログがそのまま表示されている状態か、あるいは
キーワードを検索して結果が表示されたままの状態を維持して
他のページに移動したとしても検索のダイアログが消えない状態に
するにはどうすればよろしいでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

ipopを使っているということは、HTMLタイプのポップアップダイアログ（ダイアログのように見せかけてHTMLで記述した枠）なので、別ページに遷移すれば当然消滅してしまいます

ipopを使って「どのページに移動しても表示し続けたい」とういのを実現させるには

１．ダイアログを表示させたいページの全てにipopを組み込む
２．cookieやURLパラメータ等を使って「ダイアログ表示中」の情報の引き継ぎをする
３．onload のタイミングなどで、「ダイアログ表示中」の情報を判断してipop()を呼び出し、引き継ぎ情報によって検索条件をセットする

といった流れが思いつきますが、いかがでしょう？

投稿2015/06/09 01:53

takito

総合スコア3111

退会済みユーザー

2015/06/10 03:11

大変恐縮ですがソースサンプルを提供して頂けないでしょうか？

takito

2015/06/10 10:34

javascriptを書くのが久々ですが、、、概ねこんな感じ？処理の流れが大事ということで、実行確認等はしてないですどこかおかしかったらご容赦ください前提としてcookieを使うのに便利なコレをリンクします <script type="text/javascript" src="jquery.cookie.js"></script> <script> $(function() { /*検索ダイアログの表示イベントのフック*/ $('#open1').click(function() { /*検索ダイアログ表示*/ $("#mado1").ipop(); } ); /*画面遷移の直前にダイアログの状態をcookieに保存*/ $(window).on('beforeunload', function() { /*ダイアログは見えてる？*/ if($('#mado1').css('display') == 'block') { /*表示中状態を保存*/ setCookie("OPEN","OPEN"); } else{ /*消えているので削除*/ setCookie("OPEN",""); } } /*画面遷移直後の処理はココ*/ function() { /*cookieに保存した状態を確認*/ if( getCookie("OPEN") ){ /*正常に取得できたならダイアログ表示*/ $("#mado1").ipop(); } } }); /*cookie の取得と中身の有無を確認*/ function getCookie(keyname) { return ($.cookie(keyname)!="undefined"); } /*cookie の保存処理*/ function setCookie( keyname, val ) { /*値が指定されていたら保存、空文字列なら削除*/ if( state != "" ){ /*cookieに保存*/ $.cookie(keyname, val) } else{ /*cookieのクリア*/ $.cookie(keyname, "", {expires: -1}); } } </script> cookieの保存期間をちゃんと指定してあげればラウザを再起動しても前回の検索条件を引き継ぐなんてこともできますね

takito

2015/06/10 10:35

あれ、ここに書くとスペースカットされるのかな・・・インデントが消えてしまい読みにくくてすみません・・・

退会済みユーザー

2015/06/10 11:34

$(function() { /*cookieに保存した状態を確認*/ if(getCookie("OPEN")){ /*正常に取得できたならダイアログ表示*/ $("#mado1").ipop(); } } $(function() {で下記のエラーが発生しております。 SyntaxError: missing ) after argument list 自分でやってみましたが解決できませんでした。大変恐縮ですが、ご指示いただけますでしょう？

退会済みユーザー

2015/06/10 13:45

もしこちらで見たならこちらに書き込みしてください。お手数おかけして申し訳ございません。

takito

2015/06/10 15:11

申し訳ございません。いつもこのサイトを見られるわけではなく、少しでも問題解決の手助けになればと助言、提案としてコメントさせていただきました。考え方のご提案をしました。コードサンプルも書きました。丸写しではなく、ひとつひとつ意味や流れをご理解いただいて、ご自身のコードで実装をしていただくのがよろしいかと存じ上げます。

行動規範の内容に同意します