bootstrapの
http://getbootstrap.com/javascript/#modals-related-target
を利用してボタンをクリックするとフォームが現れるというのを実装しています。
クリックすると一瞬フォームが現れるのですが
すぐに消えてしまいます。
コードは下記です。
問題点はどこにありますでしょうか??
よろしくお願いいたします。
html
1 2 <body class="drawer drawer--right"> 3 <header role="banner"> 4 <button type="button" class="drawer-toggle drawer-hamburger"> 5 <span class="sr-only">toggle navigation</span> 6 <span class="drawer-hamburger-icon"></span> 7 </button> 8 <nav class="drawer-nav" role="navigation"> 9 <ul class="drawer-menu"> 10 <li><a class="drawer-menu-item" href="/"><i class="fa fa-home" aria-hidden="true"></i>Home</a></li> 11 <li><a class="drawer-menu-item" href=""><i class="fa fa-sign-in" aria-hidden="true"></i>お問合わせ</a></li> 12 </ul> 13 </nav> 14 </header> 15 16 <div class="search"> 17 <div class="container"> 18 <div class="row"> 19 <div class="col-md-12"> 20 <!-- 検索ボタン --> 21 <button type="button" class="btn btn-danger btn-sx btn-block" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">検索する</button> 22 </div> 23 </div> 24 </div> 25 </div> 26 27<!-- 検索表示 --> 28<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> 29 <div class="modal-dialog" role="document"> 30 <div class="modal-content"> 31 <div class="modal-header"> 32 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 33 <h4 class="modal-title" id="exampleModalLabel">検索フォーム</h4> 34 </div> 35 <div class="modal-body"> 36 <form> 37 <div class="form-group"> 38 <label for="nickname">ニックネーム</label> 39 <input type="text" class="form-control" placeholder="ニックネーム"> 40 </div> 41 42 <div class="form-group"> 43 <label for="age">年齢</label> 44 <select class="form-control"> 45 <option>指定なし</option> 46 <option>20-24歳</option> 47 <option>25-30歳</option> 48 <option>31-35歳</option> 49 <option>26-40歳</option> 50 <option>41-45歳</option> 51 <option>46-50歳</option> 52 <option>51-55歳</option> 53 <option>56-60歳</option> 54 <option>60歳以上</option> 55 </select> 56 </div> 57 </form> 58 </div> 59 <div class="modal-footer"> 60 <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button> 61 <button type="button" class="btn btn-primary">検索する</button> 62 </div> 63 </div> 64 </div> 65</div> 66 67 68<script type="text/javascript"> 69$(document).ready(function() { 70$('.drawer').drawer({ 71 class: { 72 navClass: 'drawer-nav', 73 toggle: 'drawer-toggle', 74 overlay: 'drawer-overlay', 75 open: 'drawer-open', 76 close: 'drawer-close', 77 dropdown: 'drawer-dropdown' 78 }}); 79 80}); 81</script> 82
javascript
1/*! 2 * jquery-drawer v3.2.2 3 * Flexible drawer menu using jQuery, iScroll and CSS. 4 * http://git.blivesta.com/drawer 5 * License : MIT 6 * Author : blivesta <design@blivesta.com> (http://blivesta.com/) 7 */ 8 9;(function umd(factory) { 10 'use strict'; 11 if (typeof define === 'function' && define.amd) { 12 define(['jquery'], factory); 13 } else if (typeof exports === 'object') { 14 module.exports = factory(require('jquery')); 15 } else { 16 factory(jQuery); 17 } 18}(function Drawer($) { 19 'use strict'; 20 var namespace = 'drawer'; 21 var touches = typeof document.ontouchstart != 'undefined'; 22 var __ = { 23 init: function init(options) { 24 options = $.extend({ 25 iscroll: { 26 mouseWheel: true, 27 preventDefault: false 28 }, 29 showOverlay: true 30 }, options); 31 32 __.settings = { 33 state: false, 34 events: { 35 opened: 'drawer.opened', 36 closed: 'drawer.closed' 37 }, 38 dropdownEvents: { 39 opened: 'shown.bs.dropdown', 40 closed: 'hidden.bs.dropdown' 41 } 42 }; 43 44 __.settings.class = $.extend({ 45 nav: 'drawer-nav', 46 toggle: 'drawer-toggle', 47 overlay: 'drawer-overlay', 48 open: 'drawer-open', 49 close: 'drawer-close', 50 dropdown: 'drawer-dropdown' 51 }, options.class); 52 53 return this.each(function instantiateDrawer() { 54 var _this = this; 55 var $this = $(this); 56 var data = $this.data(namespace); 57 58 if (!data) { 59 options = $.extend({}, options); 60 $this.data(namespace, { options: options }); 61 62 __.refresh.call(_this); 63 64 if (options.showOverlay) { 65 __.addOverlay.call(_this); 66 } 67 68 $('.' + __.settings.class.toggle).on('click.' + namespace, function toggle() { 69 __.toggle.call(_this); 70 return _this.iScroll.refresh(); 71 }); 72 73 $(window).on('resize.' + namespace, function close() { 74 __.close.call(_this); 75 return _this.iScroll.refresh(); 76 }); 77 78 $('.' + __.settings.class.dropdown) 79 .on(__.settings.dropdownEvents.opened + ' ' + __.settings.dropdownEvents.closed, function onOpenedOrClosed() { 80 return _this.iScroll.refresh(); 81 }); 82 } 83 84 }); // end each 85 }, 86 87 refresh: function refresh() { 88 this.iScroll = new IScroll( 89 '.' + __.settings.class.nav, 90 $(this).data(namespace).options.iscroll 91 ); 92 }, 93 94 addOverlay: function addOverlay() { 95 var $this = $(this); 96 var $overlay = $('<div>').addClass(__.settings.class.overlay + ' ' + __.settings.class.toggle); 97 98 return $this.append($overlay); 99 }, 100 101 toggle: function toggle() { 102 var _this = this; 103 104 if (__.settings.state) { 105 return __.close.call(_this); 106 } else { 107 return __.open.call(_this); 108 } 109 }, 110 111 open: function open() { 112 var $this = $(this); 113 114 if (touches) { 115 $this.on('touchmove.' + namespace, function disableTouch(event) { 116 event.preventDefault(); 117 }); 118 } 119 120 return $this 121 .removeClass(__.settings.class.close) 122 .addClass(__.settings.class.open) 123 .drawerCallback(function triggerOpenedListeners() { 124 __.settings.state = true; 125 $this.trigger(__.settings.events.opened); 126 }); 127 }, 128 129 close: function close() { 130 var $this = $(this); 131 132 if (touches) $this.off('touchmove.' + namespace); 133 134 return $this 135 .removeClass(__.settings.class.open) 136 .addClass(__.settings.class.close) 137 .drawerCallback(function triggerClosedListeners() { 138 __.settings.state = false; 139 $this.trigger(__.settings.events.closed); 140 }); 141 }, 142 143 destroy: function destroy() { 144 return this.each(function destroyEach() { 145 var _this = this; 146 var $this = $(this); 147 $('.' + __.settings.class.toggle).off('click.' + namespace); 148 $(window).off('resize.' + namespace); 149 $('.' + __.settings.class.dropdown).off(__.settings.dropdownEvents.opened + ' ' + __.settings.dropdownEvents.closed); 150 _this.iScroll.destroy(); 151 $this 152 .removeData(namespace) 153 .find('.' + __.settings.class.overlay) 154 .remove(); 155 }); 156 } 157 158 }; 159 160 $.fn.drawerCallback = function drawerCallback(callback) { 161 var end = 'transitionend webkitTransitionEnd'; 162 return this.each(function setAnimationEndHandler() { 163 var $this = $(this); 164 $this.on(end, function invokeCallbackOnAnimationEnd() { 165 $this.off(end); 166 return callback.call(this); 167 }); 168 }); 169 }; 170 171 $.fn.drawer = function drawer(method) { 172 if (__[method]) { 173 return __[method].apply(this, Array.prototype.slice.call(arguments, 1)); 174 } else if (typeof method === 'object' || !method) { 175 return __.init.apply(this, arguments); 176 } else { 177 $.error('Method ' + method + ' does not exist on jQuery.' + namespace); 178 } 179 }; 180 181})); 182
回答2件
あなたの回答
tips
プレビュー