Question

我在这里以这种方式构建了这个弹出窗口，我想为它添加一些动画。褪色将是简单而好的解决方案。

“按钮”：

<a href="javascript:void(0)" onclick="document.getElementById('back_overlay').style.display='block';document.getElementById('portfolio_popup').style.display='block';">
                    <div class="port_item wow lightSpeedIn" data-wow-delay="0.1s">
                        <h3>MATERIAIS DE CONSTRUÇÃO</h3>
                        <p>+</p>
                    </div>
                </a>

弹出窗口本身：

<div id="portfolio_popup">
    <div class="portfolio_antes">
        <h1>Antes</h1>
    </div>
    <div class="portfolio_depois">
        <h1>Depois</h1>
    </div>
</div>

<a href="javascript:void(0)" onclick="hide_everything()"><div id="back_overlay" title="Fechar Popup"></div></a>

这里加上这个小脚本：

<script type="text/javascript">
        function hide_everything() {
            $("#back_overlay").css('display', 'none');
            $("#portfolio_popup").css('display', 'none');
        }
    </script>

事情是我不知道我该怎么办。

我是否必须改变其结构方式，或者我可以为其提供解决方案吗？

Answer 1

我可以在SO上找到答案： Modal pop up fade in on open click and fade out on close

这是jsfiddle：

<script>
function showModal(id) {
    $('#'+id).fadeIn('slow');
}
function hideModal(id) {
     $('#'+id).fadeOut('slow');
}    
</script>

http://jsfiddle.net/CHRNL/

将动画添加到弹出窗口

1 个答案: