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

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

ただいまの
回答率

90.47%

  • jQuery

    6926questions

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

検索ボタンをクリックしてもダイアログが消えないようにするには

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,054
退会済みユーザー

退会済みユーザー

<!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() {
                    
                $('#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はまだ作成しておりません。
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • ikuwow

    2015/06/06 17:50

    長いコードはMarkdownの```記法でシンタックスハイライトして見やすくしてもらえると助かります

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2015/06/06 18:06

    すいません。Markdownを調べてみましたが、書き方がよく分かりません。 下記のURLを載せましたのでそちらで見ていただきますでしょうか? http://low-cost-travel.lk6.co/test107.php

    キャンセル

回答 1

checkベストアンサー

0

お示しのスクリプトがtest107.phpとします。
<form>のactionで./test107.phpが指定されていますので
遷移先は同一スクリプトとなるかと思います。
URLをブラウザに入力して表示させた時と同じ動作となりますので
検索ダイヤログの検索ボタンをクリックしても、検索ダイヤログは
表示されないかと思います。

キーワードの有無によって制御したらいかがでしょうか。

            $(function() { 
                     
                $('#open1').click(function() { 
                    $("#mado1").ipop(); 
                } ); 
                 
                $('#open2').click(function() { 
                    $("#mado2").ipop(); 
                } ); 
<?php
                if (isset($_POST['keyword'])) {  // keywordがあれば表示
                    echo "$('#open2').click();";
               }
?>
またはJavaScriptは
                $('#open2').click(function() { 
                    $("#mado2").ipop(); 
                } ); 
                if ($('#kwd').text() != '') {
                    $('#open2').click();
                }
phpソースに少々手を加え
                echo '<div id="kwd">'.$keyword.'</div>'; 
JavaScriptを外部ファイルにする場合は後者のほうがいいかもです。
(keyword有無が判別できないため)

解決するためには色々な方法があるかと思いますのでどれが正解とかは無いかと存じます。
お好きな方法を考えるのもスキルアップになるかと思います。
頑張ってください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/06 19:41

    そうですね。おっしゃるとおりだと思います。
    また、アドバイスのおかげでまたひとつ勧めました。
    不快に感じたら申し訳ないのですが、若干反応が
    うん?と感じましたが希望通りの結果になりましたので
    WEB制作を続けながら少しずつ改善していこうと思います。
    この度は本当にありがとうございました。

    キャンセル

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

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • jQuery

    6926questions

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