模态显示在数据表后面

Question

SEE EDIT:

I have a modal which I'm trying to loop through and display each time in a loop. I have the following code so far, I am attempting to get the modal to display on a button click. So far it does not act as a modal and instead is displayed right under the button. I feel like I am probably missing javascript but I can't seem to find the right thing online to use. I think this is probably pretty easy and I'm just missing something. Any help would be great, I'm still new to this! Thank you!

  <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>

EDIT : I have figured out how to get the modal working, but now it displays behind the datatable I am using, rather than over it/in front of it. Is there a property I can change that will bring the modal to the front?

Here is my 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;
  }
}

Answer 1

Wrapp your div modal inside another div otherwise the other buttons in the loop will not appear.

Make sure load the bootstrap css and bootstrap js.

In your gem file have this.

gem 'bootstrap-sass', '~> 3.3.5'

And in your application.css

@import "bootstrap-sprockets";
@import "bootstrap";

And your application.js should see like this

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .

Try this and restart the server.