数据表后面的模态显示
Modal displaying behind datatable
参见:
我有一个模态,我试图通过循环和显示每次在循环中。到目前为止,我有以下代码,我试图让模态显示在一个按钮单击。到目前为止,它不作为一个模态,而是显示在按钮的右边。我觉得我可能错过了javascript,但我似乎找不到正确的东西在线使用。我觉得这可能很简单,我只是遗漏了一些东西。任何帮助将是伟大的,我仍然是新的!谢谢你!
<label class="btn" for="modal-x">Add Map</label>
<input class="modal-state" id="modal-x" type="checkbox" />
<div class="modal">
<label class="modal__bg" for="modal-x"></label>
<div class="modal__inner">
<label class="modal__close" for="modal-x"></label>
<h1>Add Mapfile</h1>
<%= form_for(@posts, multipart: true) do |f| %>
<div class="field">
<%= f.hidden_field :location_id, :value => @location.id%>
</div>
<div class="field">
<%= f.file_field :mapfile %>
</div>
<p></p>
<div class="actions" id="submit-map">
<%= f.submit 'Submit' %>
</div>
<%end %>
</div>
</div>
编辑:我已经弄清楚了如何获得模态工作,但现在它显示在我正在使用的数据表后面,而不是在它/它前面。是否有一个属性我可以改变,将模态带到前面?
这是我的css:.modal {
opacity: 0;
visibility: hidden; position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: left;
background: rgba(0,0,0, .9);
transition: opacity .25s ease;
}
.modal__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
}
.modal-state {
display: none;
}
.modal-state:checked + .modal {
opacity: 1;
visibility: visible;
}
.modal-state:checked + .modal .modal__inner {
top: 0;
}
.modal__inner {
transition: top .25s ease;
position: absolute;
top: -20%;
right: 0;
bottom: 0;
left: 0;
width: 50%;
margin: auto;
overflow: auto;
background: #fff;
border-radius: 5px;
padding: 1em 2em;
height: 50%;
}
.modal__close {
position: absolute;
right: 1em;
top: 1em;
width: 1.1em;
height: 1.1em;
cursor: pointer;
}
.modal__close:after,
.modal__close:before {
content: '';
position: absolute;
width: 2px;
height: 1.5em;
background: #ccc;
display: block;
transform: rotate(45deg);
left: 50%;
margin: -3px 0 0 -1px;
top: 0;
}
.modal__close:hover:after,
.modal__close:hover:before {
background: #aaa;
}
.modal__close:before {
transform: rotate(-45deg);
}
@media screen and (max-width: 768px) {
.modal__inner {
width: 90%;
height: 90%;
box-sizing: border-box;
}
}
将div模态包装在另一个div中,否则循环中的其他按钮将不会出现。
确保加载bootstrap css和bootstrap js.
在你的gem文件中加入这个。
gem 'bootstrap-sass', '~> 3.3.5'
在application.css
中@import "bootstrap-sprockets";
@import "bootstrap";
你的application。js应该是这样的
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
相关文章:
- 有没有比在app.js上绑定模块名称更好的方法来动态加载视图模型和视图以显示模态
- 如何通过所选索引(AngularJS)在模态弹出窗口中显示数据
- bootstrap消除模态并显示另一个模态
- React.js中显示了模态时如何执行某些操作
- 在页面上显示超过 1 个的模态框
- 如何在单击/接受/确认按钮后不再显示模态
- 如何在模态助推器中显示计算结果(JS)
- 如何将一个模态放在一边-显示其他模态(像..这样的向导)
- 限制字符串中显示的字符数,但在没有php的情况下以模态显示同一字符串中的所有字符
- 如何从url中显示模态内部的信息
- 在下拉列表选择中显示模态
- 带有黑色禁用背景的引导模态显示
- NgAnimate - 由于 NGAnimate,我的模态显示隐藏不起作用
- 反应/reux + 引导,使组件的模态显示唯一
- 在模态显示后在jquery中调用相同的函数
- Bootstrap:使用模态显示动态数据时出现问题
- 数据表后面的模态显示
- 在模态显示之前执行一个脚本标签
- 当模态显示时添加模糊类,当模态隐藏时删除
- 如何获得"这个“;背景图像's的url使用“$event.target”;以离子模态显示