0

So I've been trying to make my own modal in JSFiddle.. After I got something, I decided to put it on my website, but sadly it appears behind other stuff. What causes it? If it's needed I can put here the index page HTML code. Here's the popup:

https://jsfiddle.net/o6xf5a6d/18/

Modal:

HTML:

<h2>System</h2>
<button onclick="sitaSeen('https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpovbSsLQJf3qr3czxb49KzgL-KmsjwPKvBmm5D19V5i_rEprP5gVO8v11lZj-gIYbDclRqMA7Zq1S7lOm-0Za6753KmHoxvnQh5y7ZyhWxiRwecKUx0iL1oy6z/60fx60f','M9 Bayonet | Doppler','Battle Scarred',70)">Click</button>
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <h2>Logo</h2>
    </div>
    <div class="modal-body">
      <table class="centered">
        <thead>
          <tr>
            <th data-field="pic"></th>
            <th data-field="id">Item</th>
            <th data-field="name">Conditon</th>
            <th data-field="price">Price</th>
            <th data-field="delete"></th>
          </tr>
        </thead>
          <tbody class="papa">
          </tbody></table>
      <span id="total">Total: $0</span>
      <button class="btn black right">seen</button>
    </div>
  </div>
</div>

JavaScript:

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
var total = 0;

function sitaSeen(img, name, condition, price) {
  $('tbody').append("<tr><td><img src=" + img + "></td><td>" + name + "</td><td>" + condition + "</td><td>$" + price + "</td><td><span>X</span></td></tr>");
  total += price;
  $('#total').empty();
  $('#total').append("Total: $" + total);
}
$('.papa').on('click', 'tr span', function(){
        $(this).closest('tr').remove();
});

CSS + Materialisecss

thead, tbody { display: block; }
.papa{
    overflow-y: scroll;
    max-height: 195px;
}
table {
  box-sizing: border-box;
  border-bottom: 3px solid white;
}
td,
th {
  padding-left: 16px;
  min-width: 140px;
  border: 3px solid white;
  font: 14px/40px;
  text-align: left;
}
td {
  color: white;
}
tr {
  display: block;
}
th {
  color: white;
}

table tbody tr:nth-child(even) {
    background-color: #201f1f;
    box-shadow: inset 0px 0px 25px 2px black;
    border-bottom: 1px solid #545254;
}
table tbody tr:nth-child(odd) {
    background-color: #333333;
    box-shadow: inset 0px 0px 25px 2px black;
    border-bottom: 1px solid #545254;
}
#myModal {
  background-color:#545254;
  color:white;
}
Aleks Kpur
  • 121
  • 1
  • 2
  • 11
  • There is nothing behind the modal here though. What's your html? You could use css to fade in the "modal" as well. – Dan Weber Jun 19 '16 at 00:25
  • Just add rule of "z-index: 9999;" to your modal element and that will tell the browser that this is the "top" layer if everything else has a lower z-index. – Dan Weber Jun 19 '16 at 00:26
  • You are using Bootstrap, but not using [the Bootstrap methods to show/hide the modal.](http://stackoverflow.com/questions/13183630/how-to-open-a-bootstrap-modal-window-using-jquery) Unpredictable results are to be expected. – cssyphus Jun 19 '16 at 00:27

1 Answers1

0

You can use the z-index css property:

#myModal {
  background-color:#545254;
  color:white;
  position: relative;
  z-index: 100;
}

In order for the z-index to work, you'll need to set the position property as shown.

jkayiv
  • 1
  • 1