bootstrapでボタンをクリックするとフォームを表示させたい

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">&times;</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

退会済みユーザー

2017/05/07 02:44

ご提示のコードを当方の環境で試してみましたが、モーダルが消える現象は再現せず、正常にモーダルが表示されました。bootstrap以外のJavaScriptが影響しているということはないでしょうか。

yoshimitsu41

2017/05/07 03:19

drawer.jsと相性が悪そうです。どのようにして直せば良いのかわからないのですが。。。質問内容に追記致します。

行動規範の内容に同意します

回答2件

自己解決

jsファイルのminバージョンと通常のバージョンを2つ読み込んでいたという凡ミスでした。
大変失礼いたしました。

投稿2017/05/24 09:46

yoshimitsu41

総合スコア36

こちらで動いているように思いますが
jsの読み込みの順番ではないでしょうか。
ご提示いただいたソースはそのままです。（だったと思います。）

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<meta http-equiv="X-UA-Compatible" content="ie=edge">
7	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
8	<title>Document</title>
9</head>
10<body>
11	<div class="search">
12	        <div class="container">
13	          <div class="row">
14	              <div class="col-md-12">
15	              <!-- 検索ボタン -->
16	              <button type="button" class="btn btn-danger btn-sx btn-block" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">検索する</button>
17	              </div>
18	          </div>
19	        </div>
20	      </div>
21
22	<!-- 検索表示 -->
23	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
24	  <div class="modal-dialog" role="document">
25	    <div class="modal-content">
26	      <div class="modal-header">
27	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
28	        <h4 class="modal-title" id="exampleModalLabel">検索フォーム</h4>
29	      </div>
30	      <div class="modal-body">
31	                    <form>
32	                      <div class="form-group">
33	                        <label for="nickname">ニックネーム</label>
34	                        <input type="text" class="form-control" placeholder="ニックネーム">
35	                      </div>
36
37	                      <div class="form-group">
38	                        <label for="age">年齢</label>
39	                        <select class="form-control">
40	                          <option>指定なし</option>
41	                          <option>20-24歳</option>
42	                          <option>25-30歳</option>
43	                          <option>31-35歳</option>
44	                          <option>26-40歳</option>
45	                          <option>41-45歳</option>
46	                          <option>46-50歳</option>
47	                          <option>51-55歳</option>
48	                          <option>56-60歳</option>
49	                          <option>60歳以上</option>
50	                        </select>
51	                      </div>
52	                  </form>
53	      </div>
54	      <div class="modal-footer">
55	        <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
56	        <button type="button" class="btn btn-primary">検索する</button>
57	      </div>
58	    </div>
59	  </div>
60	</div>
61	<script
62  src="https://code.jquery.com/jquery-2.2.4.min.js"
63  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
64  crossorigin="anonymous"></script>
65			<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
66	<script type="javascript">
67	$('#exampleModal').on('show.bs.modal', function (event) {
68	  var button = $(event.relatedTarget) // Button that triggered the modal
69	  var recipient = button.data('whatever') // Extract info from data-* attributes
70	  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
71	  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
72	  var modal = $(this)
73	  modal.find('.modal-title').text('New message to ' + recipient)
74	  modal.find('.modal-body input').val(recipient)
75	})
76	</script>
77</body>
78</html>