[英]Modal dialog doesn't work with bootstrap 4
My code doesn't work with bootstrap 4. When I click on button overview, the page is darkening but a dialog doesn't show. 我的代码不能与bootstrap一起使用4.当我点击按钮概述时,页面变暗但没有显示对话框。 It's work with old bootstrap. 它与旧引导程序一起使用。 Can you help me? 你能帮助我吗?
.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)}
Try to change your code like this: 尝试更改您的代码,如下所示:
You need to add data-target property to you button and give the id of your model as value 您需要向您的按钮添加数据目标属性,并将模型的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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.