Question

我需要在TypeScript中显示一个Modal。我不想使用任何库（bootstrap，..）来设计它，我必须使用自己较少的样式。我可以用什么来创建模态？它可以是打字稿和所有浏览器支持的javascript模式。我试着像这样使用showModal（）：

这是我的TypeScript代码：

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

我知道自问这个问题以来已经过了几个月，但我最近遇到了同样的问题，并且能够找到合适的解决方案。

在打字稿中，您可以通过将对话框强制转换为HTMLDialogElement来忽略对any的需求。

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

在您的HTML中，您只是将此功能附加到角度(click)。

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

相同的技术可用于对话框的show()和close()功能。

Answer 2

如果您想手动完成所有操作，可以在页面上的所有内容上放置部分透明的灰色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>

TypeScript模态窗口

2 个答案: