Question

我有一个由html按钮触发的模式。相反，我想使用香草Javascript触发模式。最终，我想使用日期计算来触发模式，以提醒用户某些东西，但这是另一天的战斗。

现在，如果我能使用Javascript函数而不是html按钮来触发模式，我将感到非常高兴。我不想使用jquery，我试图使事情简单明了。

这是HTML：

<a href="#openModal">Open Modal</a> 
<div id="openModal" class="modalDialog"> 
    <div> 
        <a href="#close" title="Close" class="close">X</a> 
        <h2>Modal Box</h2> 
        <p>This is a sample modal box using CSS3. 
        </p> <p>You could do a lot of things here.</p> 
    </div> 
</div>

以下是CSS，它实际上不是问题的一部分，但已提出要求。为什么这不是问题的一部分？因为模态工作得很好...淡入淡出...淡入淡出...完美地定位和响应。问题是如何触发它，所以答案就在于HTML和Javascript，而不是CSS。

.modalDialog {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background: rgba(0,0,0,0.8);
     z-index: 99999;
     opacity:0;
     -webkit-transition: opacity 400ms ease-in;
     -moz-transition: opacity 400ms ease-in;
     transition: opacity 400ms ease-in;
     pointer-events: none;
}
 .modalDialog:target {
     opacity:1;
     pointer-events: auto;
}
 .modalDialog > div {
     width: 50%;
     position: relative;
     margin: 10% auto;
     padding: 0.26% 1% 0.6771% 1%;
     border-radius: 0.5208%;
     background: #fff;
     background: -moz-linear-gradient(#fff, #999);
     background: -webkit-linear-gradient(#fff, #999);
     background: -o-linear-gradient(#fff, #999);
}
 .close {
     background: #606061;
     color: #FFFFFF;
     line-height: 25px;
     position: absolute;
     right: -12px;
     text-align: center;
     top: -10px;
     width: 24px;
     text-decoration: none;
     font-weight: bold;
     -webkit-border-radius: 12px;
     -moz-border-radius: 12px;
     border-radius: 12px;
     -moz-box-shadow: 1px 1px 3px #000;
     -webkit-box-shadow: 1px 1px 3px #000;
     box-shadow: 1px 1px 3px #000;
}
 .close:hover {
     background: #00d9ff;
}

Answer 1

您可以“模仿”来自JS功能的点击。只需获取对DOM中的anchor元素的引用，然后对其执行click事件。就像您手动单击它一样。

const anchor = document.querySelector('a');
anchor.click();

Answer 2

如果该模式能够按照我认为的方式工作（因此使用纯CSS，顺便说一句就没有了），您应该能够运行

window.location.hash = '#';

打开模式和

NULL

将其关闭。

Here是一个有效的示例。

Answer 3

谢谢“ virhonestrum”的答案：

HTML：

        <button onclick="openModal()">Open Modal</button>
        <div id="openModal" class="modalDialog"> 
        <div> 
        <a title="Close" class="close" onclick="closeModal()">X</a> 
        <h2>Modal Box</h2> 
        <p>This is a sample modal box using CSS3.</p> 
        <p>You could do a lot of things here.</p> 
        </div> 
        </div>

Javascript：

    function openModal(){
    window.location.hash = '#openModal'; 
    }

    function closeModal(){
    window.location.href = '#'; 
    }

使用香草javascript按钮而不是html href触发href

3 个答案: