Bootsrap modals沒有出現在rails應用程序中

我在實例化rails應用程序的設計視圖上實現了jquery。在我在生產代碼上實現它之前，我想先試用一個示例應用程序。Bootsrap modals沒有出現在rails應用程序中

我有一個歡迎控制器和視圖

的routes.rb如下

get 'welcome/index' 
devise_for :users 
root 'welcome#index'

而且兩個register和login主要表現在以下文件中的部分模板如下：

app/views/welcome/_login_modal.html.erb

<div class="modal hide fade in" id="login"> 

<div class="modal-header"> 

<button class="close" data-dismiss="modal">x</button> 

<h2>Sign in</h2> 

</div> 

<div class="modal-body"> 

<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %> 

<div><%= f.label :email %><br /> 

<%= f.email_field :email, :autofocus => true %></div> 

<div><%= f.label :password %><br /> 

<%= f.password_field :password %></div> 

<% if devise_mapping.rememberable? -%> 

<div><%= f.check_box :remember_me %> <%= f.label :remember_me %></div> 

<% end -%> 

<%= f.submit "Sign in", :class => 'btn btn-small btn-success' %> 
<% end %> 

</div> 

<div class="modal-footer"> 

<%= render "devise/shared/links" %> 

</div> 

</div>

我已經加了我的JavaScript代碼application.html.erb文件本身

<!DOCTYPE html> 
<html> 
<head> 
    <title>PopupDevise</title> 
<%= link_to "Login", "#login", "data-toggle" => "modal", :class => 'btn btn-small' %> 

<%= link_to "Sign up", "#sign_up", "data-toggle" => "modal", :class => 'btn btn-small btn-success' %> 

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
    <%= csrf_meta_tags %> 
    <script type="text/javascript"> $(function() 

    { $("#myModal").modal({show:false }); </script> 
</head> 
<body> 
<%= render "welcome/login_modal" %> 

<%= render "welcome/sign_up_modal" %> 

<%= yield %> 

</body> 
</html>

現在，當我運行rails s一切都是可見的。當我點擊Login或Sign Up按鈕時，屏幕變爲透明灰色，但我沒有看到任何彈出窗口模式。我在js或jquery部分仍然沒有學習。有人可以告訴我，我該如何解決這個問題？

來源

2017-05-08 user3576036

我可以幫你解決這個問題。

從線

<div class="modal hide fade in" id="login">

刪除 hide和in 你應該能夠看到模式當你點擊「登錄」按鈕。

同時刪除<head> </head>中的波紋管腳本標記，因爲您未使用ID爲myModal的模態。

<script type="text/javascript"> $(function() 

{ $("#myModal").modal({show:false }); </script>

來源

2017-05-08 09:42:39

Bootsrap modals沒有出現在rails應用程序中

回答

相關問題