<dialog> работает только на хроме

Question

Я хочу использовать <dialog> тег:

<dialog> 
    <div id="start_conditions_scroll"> 
     <p>Conditions</p> 
     <p class="condition"> 
      My Conditions 
     </p> 
    </div> 
    <button id="close" class="button">Close</button> 
</dialog> 

С помощью этого CSS:

dialog { 
    margin-left: auto; 
    margin-right: auto; 
    width: 50%; 
    height: 50%; 
    border: 1px solid rgba(0, 0, 0, 0.3); 
    border-radius: 6px; 
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
} 

dialog::backdrop { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: rgba(0, 0, 0, 0.8); 
} 

И этот JavaScript:

$(document).ready(function() { 
    var dialog = document.querySelector("dialog"); 

    document.querySelector("#show").onclick = function() { 
     dialog.showModal(); 
    }; 

    document.querySelector("#close").onclick = function() { 
     dialog.close(); 
    }; 
}); 

Он работает отлично на Google Chrome, но только на Google Chrome, как кажется (он определенно не работает на IE и Firefox!). Есть ли обходной путь или что-то особенное, что я должен сделать, чтобы заставить его работать?

EDIT

извините забыл сказать, что не работает: содержание диалога показывается при запуске страницы в IE и Firefox. Он должен скрываться, и после нажатия ссылки модальный диалог должен выглядеть так, как будто он находится в хроме.

Answer 1

Да, только в хромированном или опера.

Вы можете проверить совместимость здесь http://caniuse.com/#search=dialog