HTML/CSS/JavaScript - 莫代爾不會彈出/出現在其他東西后面？

所以我一直試圖在JSFiddle中創建自己的模態。在我得到了一些東西之後，我決定把它放在我的網站上，但是可惜它出現在其他東西的後面。是什麼導致了它？如果需要的話，我可以在這裏放置索引頁面的HTML代碼。這裏的彈出：HTML/CSS/JavaScript - 莫代爾不會彈出/出現在其他東西后面？

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

模態：

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

來源

2016-06-19 Aleks Kpur

雖然這裏沒有任何背後的模態。你的html是什麼？你也可以使用css淡入「模態」。 –

只需添加「z-index：9999;」的規則到你的模態元素，這將告訴瀏覽器，這是「頂級」層，如果一切都有一個較低的Z指數。 –

您正在使用Bootstrap，但未使用[Bootstrap方法來顯示/隱藏模式。]（http://stackoverflow.com/questions/13183630/how-to-open-a-bootstrap-modal-window-using- jQuery）不可預知的結果是可以預料的。 – gibberish

可以使用的z-index CSS屬性：

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

爲了使z-index的工作，你需要設置的位置屬性，如圖所示。

來源

2016-06-19 00:29:21 jkayiv

HTML/CSS/JavaScript - 莫代爾不會彈出/出現在其他東西后面？

回答

相關問題