Question

我试图显示我在点击锚元素时使用css创建的模态对话框，并在点击对话框中的另一个元素时隐藏它。

我已经尝试找出原因，为什么它不起作用，但我找不到它......我确定这是一个非常明显的原因，我应该抓住.....我很感激任何帮助或建议。

JavaScript的：

function show(target) {
    document.getElementById(target).style.visibility = 'block';
}

function hide(target) {
    document.getElementById(target).style.display = 'none';
}

HTML：

<a id="as" href="#" onclick="show('modalDialog')">Open Modal Box</a>

<div id="modalDialog">
    <div>   <a href="#" title="Close" class="close" onclick="hide('modalDialog')">X</a>

            <h2>Modalo Box</h2>

        <p>test</p>
    </div>
</div>

link to JsFiddle

Answer 1

尝试使用，

document.getElementById(target).style.display = 'block';

而不是

document.getElementById(target).style.visibility = 'block';

由于visibility没有名为block

的属性值

DEMO

Answer 2

将css属性visibility更改为display。

Answer 3

这些是正确的CSS属性：

- Visibility: hidden or visible
- Display: block or none

所以你的代码看起来像这样：

function show(target) {
    document.getElementById(target).style.display = 'block';
    //or document.getElementById(target).style.visiblity = 'visible';
}

function hide(target) {
    document.getElementById(target).style.display = 'none';
    //or document.getElementById(target).style.visibility = 'hidden';
}

切换使用Javascript在模式对话框中隐藏和显示

3 个答案:

DEMO