TypeScript Modal Window

Question

Мне нужно показать Modal в TypeScript. Я не хочу использовать какую-либо библиотеку (bootstrap, ..), чтобы ее стилизовать, я должен использовать для нее свой собственный стиль. что я могу использовать для создания модального? это может быть javascript-мода, поддерживаемая машинописными текстами и всеми браузерами. Я пытался использовать ShowModal(), как это:

Это мой машинопись Код:

function CreateModal() { 
    document.getElementById("myDialog").showModal(); 
} 

Он дал мне эту ошибку - ShowModal не существует. , даже если он работает, он не поддерживается в IE, а Firefix работает только в chrome.

и это мой index.html

<script src="scripts/TypeScripts/Modal.js"></script> 

<button onclick="CreateModal()">Show dialog</button> 
<dialog id="myDialog">This is a dialog window</dialog> 

Я пытался использовать OnClick как хорошо, но она говорит, что не существует.

span.onclick = function() { 
    modal.style.display = "none"; 
} 

Answer 1

Если вы за делать все вручную, вы можете частично прозрачный серый DIV над всем на странице, то один DIV поверх него с вашим диалогом. Переключить видимость с помощью JS/CSS, и вы сможете стилизовать ее так, как вам нравится.

Вот краткий пример, с существенной необходимостью улучшения стиля:

div.greyModal { 
 
    opacity: 0.7; 
 
    background-color: grey; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
div.modalContent { 
 
    opacity: 1; 
 
    position: fixed; 
 
    width: 75%; 
 
    left: 50%; 
 
    margin-left: -37.5%; 
 
    height:100px; 
 
    background-color: white; 
 
    border: solid 4px black; 
 
    border-color: black; 
 
}

<div> 
 
    This is the web page content. <span style="color:red">This is red text  that appears faded when the modalToggle divs are visible</span> 
 
</div> 
 
<div class="greyModal modalToggle"> 
 
</div> 
 
<div class="modalContent modalToggle"> 
 
    This is the content of my modal dialog 
 
</div>

Answer 2

Я знаю, что это было несколько месяцев, так как этот вопрос был задан, но в последнее время у меня был такая же проблема и смог получить решение.

В машинописном тексте вы можете игнорировать необходимость в HTMLDialogElement, нажав диалоговое окно, чтобы ввести any.

openMyDialog() { 
    let myDialog:any = <any>document.getElementById("myDialog"); 
    myDialog.showModal(); 
} 

В вашем HTML, вы только присоединенными эту функцию угловой (click).

<button (click)="openMyDialog()">Open My Dialog</button> 

Тот же метод может быть использован для show() и close() функций диалога.