window.open を使わずにpopupする方法

window.open を使わずにpopup画面を表示し、
その中でボタンを押したりしたい

div 要素を動的に変えて、モーダルで・・・

という方法があるようですが、
元の画面を損なわずに、そこで、popup画面を出して、
なんらかのボタンを押したら処理をしてpopup を閉じる

この記述がよくわかりません

jqueryのポップアップ画面も試してみましたが、
デザインがうまく設定できず、自由なレイアウトが出来ませんでした。

htmlを遷移せず
同一の html の中で、そういったことが出来るのでしょうか？
出来るとしたら、何か具体的な事例をお願いできますか？

どこのサイトを参考に・・・などとしていただきますが、
そうすると、参考にならないわけではないのですが、思うような内容でなかったり、と
なかなか難しいです。

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

回答4件

jQuery UI で書くと、

lang
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>window.open を使わずにpopupする方法</title>
6<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
7<script type="text/javascript" src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
8<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />
9<style>
10#button_1 {
11	width: 33%
12}
13#button_2 {
14	width: 66%
15}
16#button_3 {
17	width: 100%
18}
19</style>
20<script type="text/javascript">
21	var dialog1;
22
23	$(function(){
24		dialog1 = $("#dialog_1").dialog({
25			title: "jQuery UI Dialog Widget のサンプル",
26			autoOpen: false,
27			modal: true,
28			buttons: [{
29				text: "OK",
30				icons: {
31					primary: "ui-icon-heart"
32				},
33				click: function() {
34					$(this).dialog("close");
35					alert("OKボタン　押下されました。")
36				}
37			}]
38		});
39	});
40</script>
41</head>
42<body>
43<input type="button" value="ダイアログ（モーダルウインドウ）を表示する。" onclick="$(dialog1).dialog('open');">
44<!-- ダイアログの本体 -->
45<div id="dialog_1">
46	<!-- ダイアログの内容　ここから -->
47  	<p>ボタンを押して下さい。</p>
48 	<input id="button_1" type="button" value="ボタン１" onclick="$(dialog1).dialog('close');alert('ボタン１　押下されました。')" />
49 	<input id="button_2" type="button" value="ボタン２" onclick="$(dialog1).dialog('close');alert('ボタン２　押下されました。')" />
50 	<input id="button_3" type="button" value="ボタン３" onclick="$(dialog1).dialog('close');alert('ボタン３　押下されました。')" />
51 	<!-- ダイアログの内容　ここまで -->
52</div>
53</body>
54</html>

![イメージ説明]WIDTH:600
jQuery UI Dialogウィジェットの詳細は

http://api.jqueryui.com/dialog/（本家）
http://js.studio-kingdom.com/jqueryui/widgets/dialog（日本語解説）

辺りで確認できます。

投稿2015/02/21 09:03

blackonyx

総合スコア354

ベストアンサー

div 要素を動的に変えて、モーダルで・・・

これが一般的だと思います。
jqueryなど既成のものが使いにくいのなら、CSSを見直すか、自分で全部書くことになるでしょう。
どの程度のレイアウトを考えているのかにもよりますが、とりあえずこの辺がとっかかりになるかと。

投稿2015/02/21 03:53

shinosan

総合スコア209

it_solution_lab

2015/02/22 14:39

もともと、こちらのサイトは参考にしていたのですが、思うような結果が得られず、試行錯誤していました。最終的に、再度、こちらのサイトをベースに、希望の機能が実現できましたので、ベストアンサーとさせていただきました。

shinosan

2015/02/22 14:52

参照されたサイトのサンプルでは、modal.jsの中のhideModal()という関数がモーダルウィンドウを閉じています。これを「実行したいfunction()」の最後で呼び出せば良いでしょう。ただ、jquery-uiは使わなくても、jquery自体は使った方が、かなりシンプルなコードになります。

it_solution_lab

2015/02/22 15:01

質問する前に、hideModal()は呼び出してみましたが、閉じませんでした・・・

shinosan

2015/02/22 15:05

スコープの問題で呼び出しに失敗している可能性があります。 hideModal()の中身を「実行したいfunction()」の末尾に追加してみては。 var baseLayer = document.getElementById('modalBaseLayer'); baseLayer.style.visibility = 'hidden';

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

追記の部分ですが、

実行したいfunction()

がポイントかと思われます。
仮に以下のようなファンクションを仮定して

lang
1function hoge(){
2	alert("close");
3	return false;
4}

これをクリックイベントで呼び出す。

lang
1<a href="#" onclick="hoge();" id="closeModal">閉じる</a>

hoge()内のalertウインドウが閉じられてからfalseを返して終了。
モーダルも閉じられます。
もし、モーダルが閉じられないとすると、この

実行したいfunction()

は正常に終了しているかが問題ではと思いますがいかがでしょう。

投稿2015/02/22 13:36

blackonyx

総合スコア354

it_solution_lab

2015/02/22 13:56

実行したいfunction の中には　　さらに、処理したい ajax のfunctionを呼び出しがあります。　　その処理のあとに alert('あと')をつけると正しくalert が表示されます　　その後ろに return false; 　　を入れましたが、モーダルはとじられませんでした。　　呼び出しているajaxの function をコメントにし　　alertもコメントにして return false;　だけにしても　　モーダルは閉じませんでした。

blackonyx

2015/02/22 14:07

すみません　return false;　はここでは大した意味がありませんでしたね。ところで、モーダルを閉じるコードは確かに実行されている感じでしょうか？

it_solution_lab

2015/02/22 14:37

質問の意図は、閉じるコードがわからない、ということです。それらしいと思われる記述方法を、色々試しましたが、うまく閉じられず、追記に記載したURLをベースにやっているので、こちらの内容で、 function に飛ばした場合の　閉じ方が不明、ということです。色々アドバイスありがとうございました。上記とはまったく別の方法で、要求する機能を実現することができました。

blackonyx

2015/02/22 14:43

あまり大してお役に立てず…

hongwei

2017/05/05 03:19

document.getElementById("div-modal").style.visibility="hidden"; にすれば。

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

こんにちは。

僕は、Bootstrapを利用したモーダルのサンプルコードを紹介します。

lang
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <title>Bootstrap Modal Sample</title>
7    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
8    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
9    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
10  </head>
11  <body>
12
13<!-- モーダルへのリンク -->
14<a href="#div-modal" role="button" class="btn" data-toggle="modal">Link to Modal</a>
15<button class="btn" onclick="window.location.href='#div-modal'" type="button" data-toggle="modal" data-target="#div-modal">Modal Button</button>
16<!-- モーダルウィンドウの本体 -->
17
18<div id="div-modal" class="modal fade"> 
19
20  <div class="modal-dialog">
21    <div class="modal-content">
22      <div class="modal-header">
23        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
24        <h4 class="modal-title">Title</h4>
25      </div>
26      <div class="modal-body">
27        <p>One fine body&hellip;</p>
28      </div>
29      <div class="modal-footer">
30        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
31        <button type="button" class="btn btn-primary">Save</button>
32      </div>
33    </div><!-- /.modal-content -->
34  </div><!-- /.modal-dialog -->
35
36  </body>
37</html>