モーダル表示

ボタンを押すと、検索ボックスがポップアップ表示されます。

モーダル表示 (下記のHTMLを貼り付けてください)

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    名古屋セミナーポータル検索
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">
                    <div class="ajaxform">
                        <form action="" method="get" class="ajaxsearch">
                            <a href="https://www.seminar-portal.org/" target="_blank">名古屋セミナーポータル</a>
                            <input type="text" name="keyword" class="text" placeholder="" value=""><!-- デフォルトの検索キーワードを設定する => value="検索キーワード" -->
                            <input value="検索" type="submit" class="btn">
                        </form>
                    </div></h4>
            </div>
            <div class="modal-body">
            <ul class="searchresult"></ul>
            </div>
            <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
            </div>
        </div>
    </div>
</div>

<script>
(function($){
    function dispLoading(){
        if($("#loading").size() == 0){
            $(".searchresult").append("<div id='loading'></div>");
        }
    }
    function removeLoading(){
        $("#loading").remove();
    }

    $(document).on("submit", ".ajaxsearch", function() {
        $(".searchresult").text("");
        dispLoading();
        var request = $.ajax({
            url: "https://www.seminar-portal.org/index.php/seminarsearch",
            type: "get",
            dataType: 'jsonp',
            jsonpCallback: "seminar",
            data: $(this).serialize(),
            timeout: 5000,
        });
        request.done(function(result, textStatus, xhr) {
            if (result.num >=1) {
                // sort by date asc
                result.items.sort(function(a,b) {
                    return (a.date < b.date ? -1 : 1);
                });

            $.each(result.items, function(i, val) {
                textdata = $("<a></a>",{
                    href: val.url,
                    text: val.title,
                    target: "_blank"
                });
                textlist = $("<p></p>").html(textdata).append(" 会場: " + val.place + " 日時: " + val.date + val.time);
                $('.searchresult').append(textlist);
            });
            } else {
                $('.searchresult').text("合致するセミナーはありません。");
            }
            removeLoading();

        });
        request.fail(function(xhr, textStatus, error) {
            $(".searchresult").text("接続できませんでした。しばらく待ってから、検索を実行してください。");
            removeLoading();
        });
        return false;
    });
})(jQuery);
</script>
<style>
    .ajaxform {
        padding:5px;
        margin-bottom:5px;
        border-radius: 6px;
    }
    .ajaxform p {
        height:35px;
        text-align:center;
        margin: 10px 2px 2px 2px;
    }
    .ajaxform .text {
        height:40px;
        width:165px;
    }
    .ajaxform .btn {
        height:40px;
        width:50px;
    }
</style>

Bootstrap系のテーマを使っている前提です。

必要なら

  • jQuery読み込み
  • Bootstrapのモーダル(cssとjs)読み込み

も行ってください。

jQueryを読み込むhtml

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>

Bootstrap Modalを読み込むhtml

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

サンプルページ

モーダル表示のサンプル検索ページはこちらをごらんください。