モーダル [高機能版]
ボタンを押すと、検索ボックスがポップアップ表示されます。
セミナータイトルの他、会場名、講師名で検索できます。
モーダル [高機能版] (下記の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"> <a href="https://www.seminar-portal.org/" target="_blank">名古屋セミナーポータル</a> </h4> </div> <div class="modal-body"> <div class="ajaxform"> <form action="" method="get" class="ajaxsearch form-horizontal"> <div class="form-group"> <label for="seminartitle" class="col-sm-3 control-label">セミナータイトル</label> <div class="col-sm-9"> <input type="text" name="keyword" id="seminartitle" class="text" placeholder="" value=""><!-- デフォルトの検索キーワードを設定する => value="検索キーワード" --> </div> </div> <div class="form-group"> <label for="seminarplace" class="col-sm-3 control-label">セミナー会場</label> <div class="col-sm-9"> <input type="text" name="place" id="seminarplace" class="text" placeholder="" value=""><!-- デフォルトの会場名を設定する => value="会場名" --> </div> </div> <div class="form-group"> <label for="seminarname" class="col-sm-3 control-label">講師名</label> <div class="col-sm-9"> <input type="text" name="name" id="seminarname" class="text" placeholder="" value=""><!-- デフォルトの講師名を設定する => value="講師名" --> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <input value="検索" type="submit" class="btn btn-primary"> </div> </div> </form> </div> <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>
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>
サンプルページ
モーダル表示高機能版のサンプル検索ページはこちらをごらんください。