我正在尝试为我的rails项目获取一个基本模态,当我点击该模式保持嵌入的链接时,它不会弹出。为了表明我在说什么,我添加了一张图片。单击“新帖子”后,就会出现这种情况。
我的问题是如何让它弹出来?是否有javascript或bootstrap的东西我不见了?
以下是我的文件。
的routes.rb
get "new_invitation" => "posts#new_invitation", as: :new_invitation
的Gemfile
gem 'bootstrap-sass'
gem 'bootstrap', git: 'https://github.com/twbs/bootstrap-rubygem'
gem 'jquery-rails'
gem 'sass-rails', '~> 5.0'
应用程序/资产/ Javascript角/ application.js中
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap-sprockets
//= require bootstrap/modal
posts_controller.rb
def new_invitation
respond_to do |format|
format.html
format.js
end
end
应用程序/视图/帖/ _new_invitation.html.erb
<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
**here comes whatever you want to show!**
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
应用程序/视图/帖/ new_invitation.js.erb
$("#modal-window").html("<%= escape_javascript(render 'posts/new_invitation') %>");
$('#modal-window').modal('show');
应用程序/视图/家/ home_page / html.erb
<%= link_to '"New Post"', new_invitation_path, {:remote => true, 'data-toggle' => "modal", 'data-target' => '#modal-window'} %>
<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
在查看其他问题时,我看到有人建议将从here下载的bootstrap.js文件添加到assets / javascripts文件夹中。我这样做了,并没有为我改变任何东西。
呈现HTML
<div id="user_nav">
<br>
</div>
<header id="header">
<div class="head-wrap">
<hgroup id="logo" class="row">
<h1><img src="/assets/dummy/logo-5f439e3ced4d9a20aefc176ffec64791c5b4e286ddee7471deeb135d08456f06.png" alt="Logo"></h1>
</hgroup>
<div id="nav-hold">
<div class="row">
<nav id="nav" class="nine columns">
<ul id="navigation" class="sf-menu sf-js-enabled">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="" class="sf-with-ul">Feeds<span class="sf-sub-indicator"> »</span></a>
<ul style="display: none;">
<li><a href="/posts-feed">Posts</a></li>
<li><a href="/requests-feed">Requests</a></li>
</ul>
</li>
<li class="">
<a href="" class="sf-with-ul">Post Formats<span class="sf-sub-indicator"> »</span></a>
<ul style="display: none;">
<li class="current"><a class="current" href="single.html">Standard Post</a></li>
<li><a href="single-gallery.html">Image Gallery Post</a></li>
<li><a href="single-video.html">Video Post</a></li>
<li><a href="single-audio.html">Audio Post</a></li>
<li><a href="single-quote.html">Quote Post</a></li>
<li><a href="single-link.html">Link Post</a></li>
</ul>
</li>
<li>
<a href="" class="sf-with-ul">Account<span class="sf-sub-indicator"> »</span></a>
<ul style="display: none;">
<li><a href="/users/edit">Manage</a></li>
<li><a <a="" onclick="alert("Signed out!")" rel="nofollow" data-method="delete" href="/users/sign_out">Sign Out</a></li>
</ul>
</li>
</ul><!-- /navigation -->
<select class="alt-nav"><option selected="selected" value="">Go to...</option><option value="/">Home</option><option value="">Feeds »</option><option value="/posts-feed">Posts</option><option value="/requests-feed">Requests</option><option value="">Post Formats »</option><option value="single.html">Standard Post</option><option value="single-gallery.html">Image Gallery Post</option><option value="single-video.html">Video Post</option><option value="single-audio.html">Audio Post</option><option value="single-quote.html">Quote Post</option><option value="single-link.html">Link Post</option><option value="">Account »</option><option value="/users/edit">Manage</option><option value="/users/sign_out">Sign Out</option></select></nav><!-- /nav -->
<aside class="widget widget_search three columns">
<form action="/" class="searchform" method="get" role="search">
<label style="font-family: "Helvetica","Helvetica Neue",Arial,sans-serif; font-size: 12px; font-style: normal; font-weight: 400; text-shadow: none; line-height: 12px; background-color: rgba(0, 0, 0, 0.1); color: rgba(255, 255, 255, 0.35); position: absolute; top: 0px; left: 0px; -moz-user-select: none; cursor: text; z-index: 999;" id="spanLabel0" class="fLabel">Search</label><input size="27" title="Search" class="s" name="s" type="text">
<input class="searchsubmit btn" value="GO" type="submit">
</form>
</aside> <!-- .widget_search -->
</div> <!-- .wrap -->
</div> <!-- #nav-hold -->
</div> <!-- .head-wrap -->
</header>
<!-- <div id="ajax-modal" class="modal hide fade" tabindex="-1" >
<div class='modal-header'>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Modal Title</h3>
</div>
<div class='modal-body'>
star
</div>
<div class='modal-footer'>
<button type="button" data-dismiss="modal" class="btn">Close</button>
</div>
</div>
-->
<center>
<h1>Home Page</h1>
<a data-toggle="modal" data-target="#modal-window" data-remote="true" href="/new_invitation">"New Post"</a>
<div id="modal-window" class="modal hide fade in" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="padding-right: 0px;"><div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
**here comes whatever you want to show!**
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<br>
Distance(miles)
<form action="/" accept-charset="UTF-8" method="get"><input name="utf8" value="✓" type="hidden">
<select name="distance" id="distance"><option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option></select>
<input name="nil" value="Enter" class="btn" data-disable-with="Enter" type="submit">
</form> <p>
</p><div style="float: left; width: auto;"></div>
<form style="display:inline-block;" class="button_to" method="get" action="/new_post"><input user_id="1" value="Create Post" type="submit"></form>
<form style="display:inline-block;" class="button_to" method="get" action="/new-request"><input user_id="1" value="Create Request" type="submit"></form>
<p></p>
</center>
<div id="page">
<div id="main">
<div id="box-container">
<div id="entry-list" class="row">
<!-- Start Main HTML -->
</div> <!-- .entry-list -->
</div>
</div> <!-- #main -->
</div> <!-- #page -->
<meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="HgOsQnrX29DHy6/DRu2bsvkX28uAEeGC96MBsN/wsZLb+22A0ooExo4JiTMfE0TJOIPiDWaeX+TIYDcB0h+zDA==">
<link rel="stylesheet" media="all" href="/assets/ad.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/authentication.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/colors/blue_teal.self-4c3ac755b1249ca5ab1cc1381a9c51cc5e93f972b3b8887a9e9084b48a120622.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/colors/brown.self-b1fe0945887a9ffb4a8e17d6af716f8f5efe35a6dabc9975ce07c501bd7a89be.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/colors/default.self-7035985272857bf2c8d61047b810d2c689e9fcfd3d9477632d7098aae2c516cd.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/colors/green_orange.self-71b8bd155d9854213a540485cc90589d05eca69c963679f5bd5cafa616c55772.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/colors/grey_clean.self-b034cc3d7197f1310351adbde518f7e5c81ca69fc6d85bd4f9acc1e08bdfcf65.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/colors/teal_pink.self-76df5149952b4d4e2bf4a53e3cd3a691b96166d46728f1d861b2ed993d47a5d5.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/company.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/donation.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/flexslider.self-9288181b186ec4642a579dd115dba62d226697fd0ae14cb10bff22bd2d256119.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/foundation.self-9c5de18f7dbca474e85180686bb86da0245aee0477a8d118639e4e354b60f75c.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/home.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/ie.self-8c0d4d38a1533a06b7070edebefbbeb41f34621bc05fbac1c50a73be0ea96152.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/mediaqueries.self-07ca3bbc837ff0e3001058a23313ece36b67f81e2a1099eda77ec92665b920b5.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/post.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/request.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/response.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/style.self-70c8e9e6a72de0172235aaee820b03e41c9c2cdddf627169a378804b143904f4.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/user.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/application.self-af04b226fd7202dfc532ce7aedb95a0128277937e90d3b3a3d35e1cce9e16886.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="screen" href="/assets/foundation.self-9c5de18f7dbca474e85180686bb86da0245aee0477a8d118639e4e354b60f75c.css?body=1">
<link rel="stylesheet" media="screen" href="/assets/flexslider.self-9288181b186ec4642a579dd115dba62d226697fd0ae14cb10bff22bd2d256119.css?body=1">
<link rel="stylesheet" media="screen" href="/assets/style.self-70c8e9e6a72de0172235aaee820b03e41c9c2cdddf627169a378804b143904f4.css?body=1">
<link rel="stylesheet" media="screen" href="/assets/mediaqueries.self-07ca3bbc837ff0e3001058a23313ece36b67f81e2a1099eda77ec92665b920b5.css?body=1">
<link rel="stylesheet" media="screen" href="/assets/colors/default.self-7035985272857bf2c8d61047b810d2c689e9fcfd3d9477632d7098aae2c516cd.css?body=1">
<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/ad.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/authentication.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap.self-b38817c3e3a3049abb1fc08dd6ae448b23330f8453226efdb074710209474f75.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/action_cable.self-17ebe4af84895fa064a951f57476799066237d7bb5dc4dc351a8b01cca19cce9.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/cable.self-6e0514260c1aa76eaf252412ce74e63f68819fd19bf740595f592c5ba4c36537.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/company.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/donation.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/fancybox/lib/jquery.mousewheel-3.0.6.pack.self-5556d2e95e38fe8ffc0b5a583072c832ab96d63262d665be0a6e5668fe238f38.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/fancybox/source/helpers/jquery.fancybox-buttons.self-fc0c4f2c13f31803b040b51a9c5a7217fff9f9409bb04417049049d29c49addc.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/fancybox/source/helpers/jquery.fancybox-media.self-74533021e73f14643354f56c8b5f7f05e4d66e613f7993760cdc8c53d7dadaec.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/fancybox/source/helpers/jquery.fancybox-thumbs.self-196204b1ecbda6b62bf226452d9cff028b7ff53306476112aace35d65e727116.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/fancybox/source/jquery.fancybox.self-2bc7e4c6ccd3a15b63f47639b64b08179384883089b6aa7ebecbccbe60dd2593.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/fancybox/source/jquery.fancybox.pack.self-f2ec87c8d22679369220b05021d939d04d451059171f0e156e1fff290dc9534a.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/home.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/jquery-1.8.2.min.self-0802d202f92fceea9a9620429185e607acb856bdba102c2a062b96f6d7432f4b.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/jquery-1.9.1.min.self-8908ff1e05132d993cae2a15330404a3d469f208825987e4d9939641238b69ec.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/jquery.equalHeights.self-ab7088e4579368b82cc3771d4bb3e25e87ffff904531dc7d1afe2f5d40ec779a.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/jquery.fitvids.self-782faaabf03c65bd3160de9e683ca42adec48912767706ba46cc0a55b496e8ab.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/jquery.flexslider-min.self-9f3beac4ee39432d93103f9a3caf1bfd9ea34489cd9391fe9f96baae47aa8d5d.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/jquery.formLabels.self-28db43ed8264627288d3b71fbdb758ab65d5b3343fdbd6b7ae777f99b6832192.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/jquery.formLabels1.0.self-cf2de1bc9e55b2dd0f7ef73bc13712c045fc26ca4ea9df158ee1dca6027d5c79.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/jquery.ias.self-8aea85b6e76827162eb8e7345e0cabafec6d68fc62e1f5c34934f80da48649c3.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/jquery.isotope.min.self-bfb3fa3b4369c7efa52512a850d896f990f8ea89deab6de1f995082f9c1bfa5f.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/jquery.jplayer.self-122bc6baea0af325239cb1e13a94765766adf14c31feec082d0424ae3a3c055f.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/modernizr.self-0f983da4eea1083e32ed0ef3c43fb3bd597af583f59ffb45458a822880a9f61c.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/post.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/request.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/response.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/scripts.self-5b6a3a5b5c61ebdf918c48beabf3d76b514d20e4347011e89947117dc941f5d8.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/selectivizr-min.self-e8f481044bbc5da041f725a7aafe09ca46cd947075acb8acf2b3e825773c0ed1.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/superfish.self-2e787101f8c216de2bca308884b2dba162ff7e6d5ee860e21eef65feca427f4e.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/user.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/transition.self-6ad2488465135ab731a045a8ebbe3ea2fc501aed286042496eda1664fdd07ba9.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/alert.self-742145c5bb847aafdadc6e339be795628f8bc25f177e851f03a8c42278eb0312.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/button.self-126ac9bf0e7f2d8568f8da3a00fd5f0fac6eae0946331003370161fbf8d7975e.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/carousel.self-e47323f363ceb3dc0bdbce05e36e709ed428e339833a41140a85cb0af24b8127.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/collapse.self-2eb697f62b587bb786ff940d82dd4be88cdeeaf13ca128e3da3850c5fcaec301.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/dropdown.self-561cca1cbaf67474e01e9536f106bad541594860a6df997004591c1c1957a147.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/modal.self-3e78617ade5663314b7ee0ea10375a5b34d59ffbade44939e3f2a4e4ef2019b3.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/tab.self-5bf7078b682f8b131332eefa46b45fa5eff2eca745fc0d03e2991450888f7c28.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/affix.self-6d6f1a7fc5c8aabf3547fa1b794fab6268f54bc55ad815e55873c71f52513517.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/scrollspy.self-969f3c5f48cdf1e439c7fa1154c13b948715f5c689f87837c0b64521d3b46ef6.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/tooltip.self-05afb177e08f98997ccfc84fa08a215e4b27d48d5fe4d049080675e9dffd8199.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/popover.self-0aa93860b59fe7393f1dd490f54b3cb994f9d6155adffce034d4e14ae361b041.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap-sprockets.self-fbfa5ad7d9aa0afe439ec4ff3883acc4cb92b62cb67c40d674320c9aa1d4642d.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/application.self-4d37d7bcf4b0b32507438063ae47ba88dd0178863f7c7a2c7125b221eefea772.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/jquery-1.9.1.min.self-8908ff1e05132d993cae2a15330404a3d469f208825987e4d9939641238b69ec.js?body=1"></script>
<script src="/assets/superfish.self-2e787101f8c216de2bca308884b2dba162ff7e6d5ee860e21eef65feca427f4e.js?body=1"></script>
<script src="/assets/jquery.flexslider-min.self-9f3beac4ee39432d93103f9a3caf1bfd9ea34489cd9391fe9f96baae47aa8d5d.js?body=1"></script>
<script src="/assets/jquery.formLabels.self-28db43ed8264627288d3b71fbdb758ab65d5b3343fdbd6b7ae777f99b6832192.js?body=1"></script>
<script src="/assets/fancybox/source/jquery.fancybox.pack.self-f2ec87c8d22679369220b05021d939d04d451059171f0e156e1fff290dc9534a.js?body=1"></script>
<script src="/assets/jquery.fitvids.self-782faaabf03c65bd3160de9e683ca42adec48912767706ba46cc0a55b496e8ab.js?body=1"></script>
<script src="/assets/jquery.ias.self-8aea85b6e76827162eb8e7345e0cabafec6d68fc62e1f5c34934f80da48649c3.js?body=1"></script>
<script src="/assets/jquery.jplayer.self-122bc6baea0af325239cb1e13a94765766adf14c31feec082d0424ae3a3c055f.js?body=1"></script>
<script src="/assets/scripts.self-5b6a3a5b5c61ebdf918c48beabf3d76b514d20e4347011e89947117dc941f5d8.js?body=1"></script>
<script src="/assets/modernizr.self-0f983da4eea1083e32ed0ef3c43fb3bd597af583f59ffb45458a822880a9f61c.js?body=1"></script>
<script src="/assets/bootstrap.self-b38817c3e3a3049abb1fc08dd6ae448b23330f8453226efdb074710209474f75.js?body=1"></script>
<footer id="footer">
<div class="row">
<div class="footer-widget-holder three columns">
<aside class="widget group">
<h3 class="widget-title">Project</h3>
<p>This is a test footer with a bunch of useless information that will be relevant once something interesting gets added here.</p>
</aside><!-- /widget -->
</div>
</div>
<div id="credits">
<div class="row">
<span class="eleven columns">
</span>
</div>
</div>
</footer>
<div class="modal-backdrop fade in"></div><div class="modal-backdrop fade in"></div><div class="modal-backdrop fade in"></div>
答案 0 :(得分:0)
根据文档,我认为标记应如下所示:
<div class="modal fade" id="modal-window" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
**here comes whatever you want to show!**
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
你可能会失踪:
<div class="modal-dialog" role="document">
<div class="modal-content">
...
</div>
</div>
我不知道这是否会产生影响,但可能值得一试。
此外,您似乎应该使用数据属性或 javascript来触发模态。看起来你正在做这两件事。
这是您的数据属性:
<%= link_to '"New Post"', new_invitation_path, {:remote => true, 'data-toggle' => "modal", 'data-target' => '#modal-window'} %>
这是你的javascript:
$('#modal-window').modal('show')
此外,您似乎正在将_new_invitation.html.erb
插入:
<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
这样会给你一个多余的<div id="modal-window" ...>
:
<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
**here comes whatever you want to show!**
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
那么,尝试类似的事情呢?
<%= link_to '"New Post"', new_invitation_path, :remote => true %>
<div id="modal-container"></div>
并且:
$("#modal-container").html("<%= escape_javascript(render 'posts/new_invitation') %>");
最后,您可以尝试在没有选项的情况下初始化模态:
$('#modal-window').modal()
我认为选项意味着是一个hash-y js对象,更像是:
$('#modal-window').modal({show: 'true'})
但是,我不确定,所以你可以尝试一下这个选项。
我希望也许有些东西是有用的。
<强>更新强>
我将其添加到我当前项目的其中一个页面中:
%button{data: {target: "#modal-window", toggle: "modal", type: "button"}}
#modal-window.modal.fade{role: 'dialog', 'aria-labelledby': 'myModalLabel', 'aria-hidden': true}
.modal-dialog{role: 'document'}
.modal-content
.modal-header
%button.close{type: 'button', data: {dismiss: 'modal'}, 'aria-hidden': true} Close
%h3#myModalLabel Modal header
.modal-body
**here comes whatever you want to show!**
.modal-footer
%button.btn{data: {dismiss: 'modal'}, 'aria-hidden': true} Close
%button.btn.btn-primary Save changes
(对不起,我使用的是HAML,而不是ERB)。生成的HTML看起来像这样:
<button data-target="#modal-window" data-toggle="modal" data-type="button"></button>
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="modal-window" role="dialog" style="display: none;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="" class="close" data-dismiss="modal" type="button">Close</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
**here comes whatever you want to show!**
</div>
<div class="modal-footer">
<button aria-hidden="" class="btn" data-dismiss="modal">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
模态工作得很好。 FWIW。