Bootstrap 适用于下拉列表，但不适用于模态

iyfjxgzm 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(1)|浏览(223)

这是一个有点奇怪的问题，但似乎我的引导模式和引导下拉菜单似乎不能同时工作。
如果我在布局中包含脚本

我的模态工作，但我的下拉菜单没有响应当我点击它。当我排除脚本，我的下拉菜单工作，但我的模态不响应点击事件。

我似乎找不到问题所在，有人有什么想法吗

请查看以下内容：

我的模态代码
下拉列表的代码
Bootstrap 代码
代码模态

视图/存储/索引.html.erb

<div class="show-panel-form"></div>
  <%= render "partials/show_panel_stores_overview"%>

视图/局部视图/显示面板存储概览.html.erb

<%= link_to 'New store', new_store_path, remote: true %>

查看/存储/新.js.erb

// Add the dialog title
$('#dialog h3').html("<i class='glyphicon glyphicon-plus'></i>");

// Render the new form
$('.modal-body').html('<%= j render("form") %>');
console.log($('#dialog'))
// Show the dynamic dialog
$('#dialog').modal("show");

// Set focus to the first element
$('#dialog').on('shown.bs.modal', function () {
    $('.first_input').focus()
  })

查看/存储/_对话框.html.erb

<div class="modal fade"
           id="dialog" tabindex="-1" role="dialog"
           aria-labelledby="myModalLabel"
           aria-hidden="true"
           data-backdrop="static"
           data-keyboard="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close"
                data-dismiss="modal"
                aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title"></h3>
      </div>
      <div class="modal-body">
      </div>

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

视图/存储/_表单

<%= simple_form_for (Store.new) do |f|%>
<%= f.input :name %>
<%= f.button :submit%>

查看/存储。创建。js。erb

<% if @store.errors.any? %>
  oldForm.html("<%= j( render 'form' ) %>");
<% else %>
  $('#dialog').modal('toggle');
  $('.store-cards-insert').prepend('<%= j(render @store) %>');
<% end %>

存储控制器

def new
    @store = current_user.store.build
    @store.age_tables.build
    respond_to do |format|
      format.html { redirect_to root_url, alert: 'Page not accessible' }
      format.js
    end
    authorize @store

  end

  def create
    @store = current_user.stores.create(store_params)
    authorize @store
    if @store.save
      respond_to do |format|
        format.js
      end
    else
      render 'new'
    end
  end

代码下拉菜单视图/部分视图/_navbar.htmlerb

<!-- Drop down setting menu -->
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="fas fa-cog fa-3x"></span>
    </button>
    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
      <li><%= link_to "stores", stores_path, class: "dropdown-item" %> </li>
      <% if (@store && @store.try(:id))%>
        <li><%= link_to "Accommodations",store_accommodation_categories_path(@store), class: "dropdown-item" %> </li>
        <li><%= link_to "Users", edit_users_store_path(@store), class: "dropdown-item" %> </li>
      <% elsif (@accommodation_category) %>
        <li><%= link_to "Accommodations",store_accommodation_categories_path(@accommodation_category.store), class: "dropdown-item" %> </li>
          <li><%= link_to "Users", edit_users_store_path(@accommodation_category.store), class: "dropdown-item" %> </li>
      <% end %>
      <li> <%= link_to "Log out", destroy_user_session_path, method: :delete, class: "navlink dropdown-item" %></li>

      <%# link_to "Accommodations", store_accommodation_category_accommodations_path(@store), class: "dropdown-item" %>
    </div>
  </div>

引导文件

视图/布局/应用程序.html.erb

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>TODO</title>
  <%= csrf_meta_tags %>
  <%= action_cable_meta_tag %>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

  <%= stylesheet_link_tag 'application', media: 'all' %>
  <%#= stylesheet_pack_tag 'application', media: 'all' %> <!-- Uncomment if you import CSS in app/javascript/packs/application.js -->
</head>
<body>
  <%= render 'shared/flashes' %>
  <%= yield %>

  <%= javascript_include_tag 'application' %>
  <%= javascript_pack_tag 'application' %>

<!-- script that changes everything -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <!-- end of script that changes everything -->
</body>
</html>

app/assets/javascripts/application.js

// = require jquery
//= require popper
//= bootstrap-sprockets
//= require cocoon
//= require flatpickr
//= require_tree .

app/javascript/packs/application.js

import {} from 'jquery-ujs'
import "bootstrap";

宝石锉

source 'https://rubygems.org'
ruby '2.5.3'

gem 'bootsnap', require: false
gem 'jquery-rails'
gem 'popper_js'
gem 'jquery-turbolinks'
gem 'bootstrap'

package.json

{
  "name": "name",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "^4.0.7",
    "bootstrap": "^4.3.1",
    "jquery": "^3.4.1",
    "jquery-ujs": "^1.2.2",
    "popper.js": "^1.15.0"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.8.0"
  }
}

twitter-bootstrap

来源：https://stackoverflow.com/questions/58302718/bootstrap-working-for-dropdown-but-not-for-modal

1条答案

按热度按时间

9udxz4iz1#

更高版本的 Bootstrap 解决了这个问题。您可以用途：源代码=”https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js“
然后，您需要将data-dismiss更改为data-bs-dismiss。
希望对你有用！

赞(0）回复(0）举报 2022-12-16

我来回答

Bootstrap 适用于下拉列表，但不适用于模态

1条答案

相关问题

热门标签

最新问答