javascript弹出窗口中的标题栏，使用div和css代替table

我正在几个web应用程序中替换showModalDialog函数。javascript函数使用两个覆盖：一个覆盖页面上的所有内容，另一个显示弹出内容。因为有些页面会调用showModalDialog两到三次，所以javascript替代程序会通过对已有页面进行新的覆盖来管理多个调用。它在Chrome、IE和FF中运行良好

但我希望弹出式内容更多地以带有标题栏的窗口的形式出现，因为我喜欢窗口。它很容易线程弹出的内容。由于底层内容是屏蔽的，所以下面的任何内容都不能被操作，只能对弹出的内容进行操作。javascript函数有几个参数，例如是否屏蔽底层内容、是否使用边框等。要完全复制showModalDialog，我希望函数除了显示内容之外还返回一个值。我希望函数添加一个提交按钮（可选），但不是取消按钮，我希望标题栏上有一个大X或反向颜色方块

---

最后一个问题是，在不使用表格的情况下，如何制作一端带有X或正方形的标题栏？我们有屏幕阅读器和应用程序需要满足可访问性标准。对于使用屏幕阅读器的人来说，页面中的表格更为困难，应尽可能避免使用。标题栏将具有作为参数传递给函数的相同边框颜色，或默认为黑色。谢谢

我想这就是你需要的

HTML:

小提琴：

<div class="popupWrap">
    <div class="popupTitle">
        Title
        <div class="popupClose">
            X
        </div>
    </div>
</div>

* {
    box-sizing: border-box;
}

.popupWrap {
    width: 350px;
    height: 400px;
    background-color: lightgrey;
    border: 1px solid grey;
    position: relative;
}

.popupTitle {
    width: 100%;
    height: 35px;
    background-color: black;
    text-align: center;
    color: white;
    line-height: 35px;
}

.popupClose {
    position: absolute;
    border-radius: 15px;
    width: 25px;
    height: 25px;
    border: 2px solid grey;
    padding: 5px;
    padding-top: 2px;
    line-height: normal;
    color: red;
    background-color: white;
    right: 5px;
    font-family: arial;
    top: 5px;
    cursor: pointer;
}