模态对话框不适用于 bootstrap 4答案

【问题标题】：Modal dialog doesn't work with bootstrap 4模态对话框不适用于 bootstrap 4
【发布时间】：2019-09-25 06:09:51
【问题描述】：

我的代码不适用于 bootstrap 4。当我单击按钮概览时，页面变暗，但没有显示对话框。它适用于旧的引导程序。你能帮帮我吗？

        .form-group
          %label.control-label{ :for => "overview" }
            %a.btn.btn-info{ :href=> "#modaloverview", "data-toggle" => "modal"}
              INFO
          .modal.modal.hide.fade#modaloverview{ :tabindex => "-1", :role => "dialog", "aria-labelledby" => "modal-label", "aria-hidden" => "true"}
            .modal-header
              %button.close{ :type => "button", "data-dismiss" => "modal", "aria-hidden" => "true" }
                X
              %h3#modal-label
                titletextetxtetxtext
            .modal-body
              %p
                texttextetxtetxtettxtte
          .controls
            %textarea.form-control.input-xxlarge.allowMarkupShortcut#overview{ :rows => "10", :name => "overview" }
              - if @finding
                - if @finding.overview
                  #{meta_markup(@finding.overview)}

【问题讨论】：

标签： javascript css ruby bootstrap-modal haml

【解决方案1】：

尝试像这样更改您的代码：

您需要为按钮添加 data-target 属性并将模型的 id 作为值

form-group %label.control-label{ :for => "overview" } 
%a.btn.btn-info{ :href=> "#modaloverview", "data-toggle" => "modal", "data-target" => "#myModal" } INFO 
#myModal.modal.modal.hide.fade#modaloverview{ :tabindex => "-1", :role => "dialog", "aria-labelledby" => "modal-label", "aria-hidden" => "true"} .modal-header %button.close{ :type => "button", "data-dismiss" => "modal", "aria-hidden" => "true" } X 
  %h3
    #modal-label titletextetxtetxtext 
 .modal-body
   %p texttextetxtetxtettxtte .controls                 
    %textarea.form-control.input-xxlarge.allowMarkupShortcut

  #overview{ :rows => "10", :name => "overview" } - if @finding - if @finding.overview #{meta_markup(@findin

【讨论】：