Question

我正在几个Web应用程序中替换showModalDialog函数。使用两个叠加层创建了一个javascript函数：一个屏蔽了页面上的所有内容，另一个显示了弹出内容。因为一些页面调用showModalDialog两次或三次，所以javascript替换通过对已存在的内容执行新的覆盖来管理多个调用。它适用于Chrome，IE和FF。

但我希望弹出的内容更像是带有标题栏的窗口，因为我喜欢开窗。弹出弹出的内容很容易。由于隐藏了基础内容，因此不能对其进行任何操作，只能对弹出的内容采取措施。 javascript函数有几个参数，例如是否屏蔽底层内容，是否使用边框等。要完全复制showModalDialog，我希望函数除了显示内容外还返回一个值。我希望函数可以添加一个提交按钮，但是我想要一个带有大X或反色方块的标题栏，而不是取消按钮。

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

Answer 1

我认为这就是你需要的

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/

javascript弹出窗口中的标题栏，带有div和css而不是table

1 个答案: