0

我正在替换几个 Web 应用程序中的 showModalDialog 函数。使用两个叠加层制作了一个 javascript 函数：一个遮盖了页面上的所有内容，另一个显示了弹出内容。因为某些页面调用 showModalDialog 两次或三次，javascript 替换通过对已经存在的内容进行新的覆盖来管理多个调用。它在 Chrome、IE 和 FF 中运行良好。

但是我希望弹出的内容更多的是带有标题栏的窗口形式，因为我喜欢窗口化。很容易串接弹出的内容。由于隐藏了底层内容，因此无法对下面的任何内容进行操作，并且只能对弹出的内容进行操作。javascript函数有几个参数，例如是否屏蔽底层内容，是否使用边框等。为了完全复制showModalDialog，我希望该函数除了显示内容之外还返回一个值。我希望该函数添加一个提交按钮，可选，但我想要一个带有大 X 或反色方块的标题栏，而不是取消按钮。

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

4

1 回答 1

0

我认为这就是你需要的

HTML：

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

CSS：

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

小提琴：http: //jsfiddle.net/2sg400h8/

于 2014-12-31T17:43:51.853 回答