質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2072閲覧

リンクだと動くが、inputだと動かない

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2015/06/04 12:05

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="./test013.js"></script>
<script type="text/javascript"> $(function() { $('#open1').click(function() { $("#mado1").ipop(); } ); $('#open2').click(function() {$("#mado2").ipop();} ); }); </script> <style type="text/css"> .ipop { padding: 0; background-color: #fed; width: 300px; height: 200px; border: 1px solid #aaa; /* この3行は必須 */ 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="#" id="open1">窓1開く</a>
<a href="#" id="open2">窓2開く</a>

<input type="button" value="検 索" id="open2"> <div class="ipop" id="mado1"> <div class="ipop_close">×</div> <div class="ipop_title">タイトル</div> コンテンツ<br> コンテンツ </div> <div class="ipop" id="mado2"> <div class="ipop_close">×</div> <div class="ipop_title">タイトル2</div> コンテンツ2<br> コンテンツ2 </div> </body> </html>

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

(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);

リンクタグだと動くのですが、inputタグのボタンだと動きません。
大変恐縮ですが、どうすれば動くのかを教えて頂けないでしょうか。

また、ツールバー&メニューバーの検知についても質問を出しております。
どなたか分かるかようでしたらご回答頂きますようお願い申し上げます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

単純な問題で、ID: #open2 の重複です。
これでコピペすれば動きます.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('#open1').click(function() { $("#mado1").ipop(); } ); $('#open2').click(function() {$("#mado2").ipop();} ); $('#open3').click(function() {$("#mado2").ipop();} ); }); </script> <style type="text/css"> .ipop { padding: 0; background-color: #fed; width: 300px; height: 200px; border: 1px solid #aaa; /* この3行は必須 */ 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="#" id="open1">窓1開く</a>
<a href="#" id="open2">窓2開く</a>

<input type="button" value="検 索" id="open3"> <div class="ipop" id="mado1"> <div class="ipop_close">×</div> <div class="ipop_title">タイトル</div> コンテンツ<br> コンテンツ </div> <div class="ipop" id="mado2"> <div class="ipop_close">×</div> <div class="ipop_title">タイトル2</div> コンテンツ2<br> コンテンツ2 </div> <script> (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);
</script>

</body> </html>

投稿2015/06/04 12:17

編集2015/06/04 12:19
maru--ko

総合スコア27

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/06/05 09:31

単純な問題で、ID: #open2 の重複です。 というコメントはナイスです!! すぐに解決しました!!ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問