javascript - 模态对话框不适用于 bootstrap 4

Question

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

        .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)}

Answer 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