javascript - Foundation 5 Modal Reveal 在 Rails 中不起作用

Question

我正在尝试启动 a 但它不起作用...这是我的 Gemfile 的源代码:

source 'https://rubygems.org'
ruby "1.9.3"

# Defaults
gem 'rails', '4.0.1'
gem 'mysql2'
gem 'sass-rails', '~> 4.0.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 1.2'

group :assets do
  gem 'modernizr-rails'
end

group :doc do
  # bundle exec rake doc:rails generates the API under doc/api.
  gem 'sdoc', require: false
end

# Heroku Dependences
gem 'rails_12factor', group: :production

# Spree with Dependencies
gem 'spree', '2.1.3'
gem 'spree_gateway', :git => 'https://github.com/spree/spree_gateway.git', :branch => '2-1-stable'
gem 'spree_auth_devise', :git => 'https://github.com/spree/spree_auth_devise.git', :branch => '2-1-stable'

# Foundation with Dependencies
gem 'compass'
gem 'foundation-rails'

而我的application.js文件如下:

//= require jquery
//= require jquery_ujs
//= require foundation
//= require_tree .

$(function(){ $(document).foundation(); });

为了结束这里的乐趣，这是 HTML:

<div class="container">
  <a href="#" class="radius button" data-reveal-id="contactUs">Click Me For A Modal</a>
  <div id="contactUs" class="reveal-modal" data-reveal>
    <h2>We're the Web Devs of Chuck Norris</h2>
    <h3>You don't contact us. We contact you.</h3>
    <a class="close-reveal-modal">&#215;</a>
  </div>
</div>

我检查我的 '' 以查看是否所有内容都正确加载和列表。我警告你，我正在向你展示一切!我为阅读重要文件添加了额外的空格。

<link href="http://localhost:3000/assets/application.css?body=1" media="all" rel="stylesheet">
<link href="http://localhost:3000/assets/foundation_and_overrides.css?body=1" media="all" rel="stylesheet">
<link href="http://localhost:3000/assets/jquery.alerts/jquery.alerts.css?body=1" media="all" rel="stylesheet">
<link href="http://localhost:3000/assets/jquery.alerts/jquery.alerts.spree.css?body=1" media="all" rel="stylesheet">
<link href="http://localhost:3000/assets/responsive-tables.css?body=1" media="all" rel="stylesheet">
<link href="http://localhost:3000/assets/normalize.css?body=1" media="all" rel="stylesheet">
<link href="http://localhost:3000/assets/skeleton.css?body=1" media="all" rel="stylesheet">
<link href="http://localhost:3000/assets/jquery.ui.core.css?body=1" media="all" rel="stylesheet">
<link href="http://localhost:3000/assets/jquery.ui.theme.css?body=1" media="all" rel="stylesheet">
<link href="http://localhost:3000/assets/jquery.ui.datepicker.css?body=1" media="all" rel="stylesheet">
<link href="http://localhost:3000/assets/jquery.ui.menu.css?body=1" media="all" rel="stylesheet">
<link href="http://localhost:3000/assets/jquery.ui.autocomplete.css?body=1" media="all" rel="stylesheet">
<link href="http://localhost:3000/assets/jquery.powertip.css?body=1" media="all" rel="stylesheet">
<link href="http://localhost:3000/assets/select2.css?body=1" media="all" rel="stylesheet">
<link href="http://localhost:3000/assets/admin/spree_admin.css?body=1" media="all" rel="stylesheet">
<link href="http://localhost:3000/assets/admin/spree_backend.css?body=1" media="all" rel="stylesheet">
<link href="http://localhost:3000/assets/admin/all.css?body=1" media="all" rel="stylesheet">
<link href="http://localhost:3000/assets/home.css?body=1" media="all" rel="stylesheet">
<link href="http://localhost:3000/assets/store/screen.css?body=1" media="all" rel="stylesheet">
<link href="http://localhost:3000/assets/store/spree_frontend.css?body=1" media="all" rel="stylesheet">
<link href="http://localhost:3000/assets/store/all.css?body=1" media="all" rel="stylesheet">
    <script src="./Tea's Me_files/modernizr.js"></script>
    <script src="./Tea's Me_files/jquery.js"></script>
    <script src="./Tea's Me_files/jquery_ujs.js"></script>
    <script src="./Tea's Me_files/foundation.js"></script><meta class="foundation-mq-small"><meta class="foundation-mq-medium"><meta class="foundation-mq-large"><meta class="foundation-mq-xlarge"><meta class="foundation-mq-xxlarge">
<script src="./Tea's Me_files/foundation.abide.js"></script>
<script src="./Tea's Me_files/foundation.accordion.js"></script>
<script src="./Tea's Me_files/foundation.alert.js"></script>
<script src="./Tea's Me_files/foundation.clearing.js"></script>
<script src="./Tea's Me_files/foundation.dropdown.js"></script>
<script src="./Tea's Me_files/foundation.interchange.js"></script>
<script src="./Tea's Me_files/foundation.joyride.js"></script>
<script src="./Tea's Me_files/foundation.magellan.js"></script>
<script src="./Tea's Me_files/foundation.offcanvas.js"></script>
<script src="./Tea's Me_files/foundation.orbit.js"></script>
    <script src="./Tea's Me_files/foundation.reveal.js"></script>
<script src="./Tea's Me_files/foundation.tab.js"></script>
<script src="./Tea's Me_files/foundation.tooltip.js"></script>
<script src="./Tea's Me_files/foundation.topbar.js"></script>
<script src="./Tea's Me_files/foundation(1).js"></script>
<script src="./Tea's Me_files/jquery-migrate-1.0.0.js"></script>
<script src="./Tea's Me_files/jquery.ui.core.js"></script>
<script src="./Tea's Me_files/jquery.ui.datepicker.js"></script>
<script src="./Tea's Me_files/jquery.ui.widget.js"></script>
<script src="./Tea's Me_files/jquery.ui.mouse.js"></script>
<script src="./Tea's Me_files/jquery.ui.sortable.js"></script>
<script src="./Tea's Me_files/jquery.ui.position.js"></script>
<script src="./Tea's Me_files/jquery.ui.menu.js"></script>
<script src="./Tea's Me_files/jquery.ui.autocomplete.js"></script>
    <script src="./Tea's Me_files/modernizr.js"></script>
<script src="./Tea's Me_files/jquery.cookie.js"></script>
<script src="./Tea's Me_files/jquery.delayedobserver.js"></script>
<script src="./Tea's Me_files/jquery.jstree.js"></script>
<script src="./Tea's Me_files/jquery.alerts.js"></script>
<script src="./Tea's Me_files/jquery.powertip.js"></script>
<script src="./Tea's Me_files/jquery.vAlign.js"></script>
<script src="./Tea's Me_files/css_browser_selector_dev.js"></script>
<script src="./Tea's Me_files/spin.js"></script><style type="text/css"></style>
<script src="./Tea's Me_files/trunk8.js"></script>
<script src="./Tea's Me_files/jquery.adaptivemenu.js"></script>
<script src="./Tea's Me_files/equalize.js"></script>
<script src="./Tea's Me_files/responsive-tables.js"></script>
<script src="./Tea's Me_files/jsuri.js"></script>
<script src="./Tea's Me_files/spree.js"></script>
<script src="./Tea's Me_files/select2.js"></script>
<script src="./Tea's Me_files/spree-select2.js"></script>
<script src="./Tea's Me_files/address_states.js"></script>
<script src="./Tea's Me_files/admin.js"></script>
<script src="./Tea's Me_files/handlebars.js"></script>
<script src="./Tea's Me_files/handlebar_extensions.js"></script>
<script src="./Tea's Me_files/variant_autocomplete.js"></script>
<script src="./Tea's Me_files/taxon_autocomplete.js"></script>
<script src="./Tea's Me_files/option_type_autocomplete.js"></script>
<script src="./Tea's Me_files/user_picker.js"></script>
<script src="./Tea's Me_files/product_picker.js"></script>
<script src="./Tea's Me_files/calculator.js"></script>
<script src="./Tea's Me_files/edit.js"></script>
<script src="./Tea's Me_files/jquery.payment.js"></script>
<script src="./Tea's Me_files/gateway.js"></script>
<script src="./Tea's Me_files/image_settings.js"></script>
<script src="./Tea's Me_files/index.js"></script>
<script src="./Tea's Me_files/new.js"></script>
<script src="./Tea's Me_files/nested-attribute.js"></script>
<script src="./Tea's Me_files/edit(1).js"></script>
<script src="./Tea's Me_files/edit_form.js"></script>
<script src="./Tea's Me_files/edit(2).js"></script>
<script src="./Tea's Me_files/new(1).js"></script>
<script src="./Tea's Me_files/progress.js"></script>
<script src="./Tea's Me_files/promotions.js"></script>
<script src="./Tea's Me_files/shipments.js"></script>
<script src="./Tea's Me_files/states.js"></script>
<script src="./Tea's Me_files/stock_management.js"></script>
<script src="./Tea's Me_files/stock_movement.js"></script>
<script src="./Tea's Me_files/stock_transfer.js"></script>
<script src="./Tea's Me_files/taxon_tree_menu.js"></script>
<script src="./Tea's Me_files/taxonomy.js"></script>
<script src="./Tea's Me_files/underscore-min.js"></script>
<script src="./Tea's Me_files/zone.js"></script>
<script src="./Tea's Me_files/spree_backend.js"></script>
<script src="./Tea's Me_files/all.js"></script>
<script src="./Tea's Me_files/home.js"></script>
<script src="./Tea's Me_files/jquery.validate.min.js"></script>
<script src="./Tea's Me_files/checkout.js"></script>
<script src="./Tea's Me_files/product.js"></script>
<script src="./Tea's Me_files/cart.js"></script>
<script src="./Tea's Me_files/spree_frontend.js"></script>
<script src="./Tea's Me_files/all(1).js"></script>
    <script src="./Tea's Me_files/application.js"></script>
<meta content="authenticity_token" name="csrf-param">
<meta content="TANn8xSCCKcravec3vrVLK7l5212sXppURdc+uCevY0=" name="csrf-token">

出于某种奇怪的原因，我的 modernizr 被加载了两次...

希望我已经提供了您需要的所有代码。如果还有其他问题，请告诉我。

Answer 1

初始化基础 在包含 Foundation JavaScript 之后，只需添加一个简单的调用来初始化页面上的所有插件。在页面末尾初始化 Foundation。

<script>
 $(document).foundation();
</script>