モーダルが全ページに表示されてしまう

Ruby on Rails でjsファイルでモーダルを設置しています。
しかしこの設定では全部のページにjsファイルが反映してしまって困っています。

コントローラー別にjsを設定したりも考えているのですがどのような設定がベストか教えてください。

###app/assets/JavaScript内に３つ入れています。
・jquery.cookie.js
・jquery.layerBoard.js
・jquery-3.2.1.min.js

###view/layouts/application.html.erb

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

###モーダルを表示したいページ view/toppages.html.erb

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
<%= csrf_meta_tags %>
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>

<%= javascript_include_tag "jquery.layerBoard.js" %>
<%= javascript_include_tag "jquery.cookie.js" %>
<%= javascript_include_tag "scroll.js" %>

</head>
<body class='<%= "#{controller.controller_name}" %>
<div class="modal">
<div class="pr_box">
<div class="disclaimer_inner">
<p class="text-center">【モーダルウィンドウ表示】</p>
<div class="disclaimer_bt">
<p class="text-center">
 <%= link_to "同意します", "/", {:class => "btn btn-primary text-center"} %>
  &nbsp;&nbsp;
  <%= link_to "同意しません", 'http://www.google.co.jp/', {:class => "btn btn-danger text-center"} %></p>
</div>
</div>
</div>
</div>

###stylesheets/application.scss

.toppages{
div.modal {
  position: relative;
  display:none;
  z-index:9999;
}
div.modal .pr_box {
  width:500px;
  height:auto;
  margin:auto;
  box-shadow:0px 0px 12px rgba(0,0,0,0.4);
  padding:40px;
  background:#FFFFFF;
}
.pr_box img:hover {
  filter: alpha(opacity=50);
  -webkit-opacity:0.50;
  -moz-opacity:0.50;
  -ms-opacity:0.50;
  -o-opacity:0.50;
  opacity:0.50;
}
.close_modal{
  display: block;
  width: 180px;
  line-height:50px;
  display: inline-table;
  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  transition: all 200ms linear;
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  transition: all 300ms linear;
  color: #fff;
  border: 2px solid #018ad1;
  background: #018ad1;
  *display: inline;
  *zoom: 1;
}
.close_modal:hover {
  text-decoration: none;
  display: inline-table;
  color: #018ad1;
  border: 2px solid #018ad1;
  background: #fff;
}
.close_modal_no{
  display: block;
  width: 180px;
  line-height:50px;
  display: inline-table;
  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  transition: all 200ms linear;
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  transition: all 300ms linear;
  color: #fff;
  border: 2px solid #60cfff;
  background: #60cfff;
  *display: inline;
  *zoom: 1;
}
.close_modal_no:hover {
  text-decoration: none;
  display: inline-table;
  color: #018ad1;
  border: 2px solid #60cfff;
  background: #fff;
}
}

###/app/assets/javascripts/application.js

//= require rails-ujs
//= require turbolinks
//= require jquery
//= require bootstrap-sprockets
//= require_tree .

###/app/assets/stylesheets/application.scss

 *= require_tree .
 *= require_self
 */
@import "bootstrap-sprockets";
@import "bootstrap";

###jquery.cookie.js

(function (factory) {
	if (typeof define === 'function' && define.amd) {
		// AMD. Register as anonymous module.
		define(['jquery'], factory);
	} else {
		// Browser globals.
		factory(jQuery);
	}
}(function ($) {

	var pluses = /+/g;

	function raw(s) {
		return s;
	}

	function decoded(s) {
		return decodeURIComponent(s.replace(pluses, ' '));
	}

	function converted(s) {
		if (s.indexOf('"') === 0) {
			// This is a quoted cookie as according to RFC2068, unescape
			s = s.slice(1, -1).replace(/\"/g, '"').replace(/\\/g, '\');
		}
		try {
			return config.json ? JSON.parse(s) : s;
		} catch(er) {}
	}

	var config = $.cookie = function (key, value, options) {

		// write
		if (value !== undefined) {
			options = $.extend({}, config.defaults, options);

			if (typeof options.expires === 'number') {
				var days = options.expires, t = options.expires = new Date();
				t.setDate(t.getDate() + days);
			}

			value = config.json ? JSON.stringify(value) : String(value);

			return (document.cookie = [
				config.raw ? key : encodeURIComponent(key),
				'=',
				config.raw ? value : encodeURIComponent(value),
				options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
				options.path    ? '; path=' + options.path : '',
				options.domain  ? '; domain=' + options.domain : '',
				options.secure  ? '; secure' : ''
			].join(''));
		}

		// read
		var decode = config.raw ? raw : decoded;
		var cookies = document.cookie.split('; ');
		var result = key ? undefined : {};
		for (var i = 0, l = cookies.length; i < l; i++) {
			var parts = cookies[i].split('=');
			var name = decode(parts.shift());
			var cookie = decode(parts.join('='));

			if (key && key === name) {
				result = converted(cookie);
				break;
			}

			if (!key) {
				result[name] = converted(cookie);
			}
		}

		return result;
	};

	config.defaults = {};

	$.removeCookie = function (key, options) {
		if ($.cookie(key) !== undefined) {
			// Must not alter options, thus extending a fresh object...
			$.cookie(key, '', $.extend({}, options, { expires: -1 }));
			return true;
		}
		return false;
	};

}));

###jquery.layerBoard.js

$(function(){
	var modal = $(".modal");
	var opacity = 0.6;
	var button = $(".close_modal");
	var limit = 120;
	var cookie = $.cookie("modal");
	if(cookie !== "off"){
		console.log("!!!")
		var overlay = $("<div></div>");
		overlay.css({
			"position":"fixed",
			"z-index":100,
			"top":0,
			"left":0,
			"height":100+"%",
			"width":100+"%",
			"background":"#000",
			"opacity":opacity
		});
		$("body").append(overlay);
		modal.css("display", "block");
		console.log("b")
	}
	button.click(function(){
		$(overlay).fadeOut("slow");
		$(modal).hide();
		var clearTime = new Date();
		clearTime.setTime(clearTime.getTime()+(limit*60*1000));
		$.cookie("modal", "off", {expires:clearTime, path:"/"});
	});
	$(".remove_cookie").click(function(){
		$.removeCookie("modal", {expires:-1, path:"/"});
		location.reload();
	});
});

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

回答1件

この設定では全部のページにjsファイルが反映してしまって困っています。

Railsのデフォルトではそれは意図的なものです。というのも、（上の例にも組み込まれていますが）Turbolinksといって「ページ遷移をJavaScriptで行って高速化する」仕組みが入っているので、全ページでJavaScriptを共通化しておく必要があるのです。

取るべき道は2つあって、

Turbolinksを完全に止めてしまう
各イベントハンドラでどのページにいるのか確認して、正しいページでなければreturnすることで以降の動作を止める

投稿2018/01/17 12:34

maisumakun

総合スコア145183

退会済みユーザー

2018/01/18 01:39 編集

もし可能でしたらそのやり方を教えていただけませんでしょうか？

maisumakun

2018/01/17 12:46

初心者であれば、Turbolinksを止めることをおすすめします（application.js内の「//= require turbolinks」を削除してください）。あとは、ページごとにJavaScriptを書けばそのページでだけ動くようになります（とりあえずは直書きでもいいかもしれません）。

退会済みユーザー

2018/01/17 12:52 編集

layout/application.html.erb <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>を消しモーダルの表示したいページ <%= javascript_include_tag "jquery.layerBoard.js" %> <%= javascript_include_tag "jquery.cookie.js" %> <%= javascript_include_tag "scroll.js" %> でよろしいでしょうか？

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