質問編集履歴

1 一部のソース削除

退会済みユーザー

退会済みユーザー

2015/06/06 17:48  投稿

検索ボタンをクリックしてもダイアログが消えないようにするには
<!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($) {
               $.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);
           $(function() {
                   
               jQuery(document).ready( function() {  
                   $("#button_1").click(function(){  
                       alert('hello world! button 1');  
                       });  
                   $("#button_2").click(function(){  
                       alert('hello world! button 2');  
                   });  
               });  
 
               $('#open1').click(function() {
                   $("#mado1").ipop();
               } );
               
               $('#open2').click(function() {
                   $("#mado2").ipop();
               } );
           });
           
       </script>
       <style type="text/css">
           .ipop_login
           {
               font-family: "Meiryo" !important;
               padding: 0;
               background-color: #fed;
               width: 282px;
               height: 140px;
               border: 1px solid #aaa;
               
               /* この3行は必須 */
               position: absolute;
               display: none;
               z-index: 9999;
           }
           
           .ipop_serach
           {
               padding: 0;
               background-color: #fed;
               width: 320px;
               height: 400px;
               border: 1px solid #aaa;
                       
               /* この3行は必須 */
               position: absolute;
               display: none;
               z-index: 9999;
           }
           
           .ipop_title
           {
               font-family: "Meiryo" !important;
               font-size:20px;
               height: 25px;
               background-color: #fdc;
               cursor: move;
           }
           
           .ipop_close {
               cursor: pointer;
               float: right;
           }'
       </style>
   </head>
   <body>
       <input type="button" value="ログイン" id="open1">
           
       <input type="button" value="検 索" id="open2">
       <div class="ipop_login" id="mado1">
           <div class="ipop_close">×</div>
           <div class="ipop_title">Login</div>
           <table border='1'>
               <tr width="282px">
                   <td>USER_ID</td><td><input type='text' style="width:170px;"></td>
               </tr>
               <tr width="282px">
                   <td>PASSWORD</td><td><input type='text' style="width:170px;"></td>
               </tr>
           </table>
       </div>
       <div class="ipop_serach" id="mado2">
           <div class="ipop_close">×</div>
           <div class="ipop_title">検索</div>
           <?php
       
               echo "<form action='./test107.php' method='post'>";
                   echo"<input type='text' name='keyword' style='width:272px;'><input type='submit' value='検索'>";
               echo "<form>";
       
               $keyword = $_POST['keyword'];
                       
               echo $keyword;
       
           ?>
       </div>
       
   </body>
           
</html>
今回は検索ボタンの方での質問でございます。
ログインはスルーしていただけら幸いでございます。
一番最初の検索ボタンをクリックしてダイアログを表示するまでは問題は
ないんですが、ダイアログが開いてキーワードを入れて横にある検索を
押すとダイアログが消えてしまいます。
一番最初のダイアログを検索を再度押してダイアログを開くと最初に入力した
キーワードの文字が表示されており、文字取得表示はできております。
ダイアログに表示されている検索を押してもダイアログが消えることなく
入力したキーワードが表示されているようにさせてたいのですが、どうすれば
できるのか教えて頂けないでしょうか?
予定ではheadにあるjQueryのソースをtest107.jsに保存を考えております。
<script type="text/javascript" src="./test107.js"></script>
※test107.jsはまだ作成しておりません。
  • jQuery

    13097 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る