向弹出窗口添加动画

Adding animation to a popup

本文关键字：添加 动画 窗口      更新时间：2023-09-26

我有一个这样的弹出框，我想给它添加一些动画。一个淡出将是一个简单而好的解决方案。

"按钮":

<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>

问题是我不知道我怎么能做这样的事。

我是否必须改变它的结构方式，或者我是否有解决方案?

我可以在SO上找到答案:模态弹出窗口打开点击淡入，关闭淡出

文件如下:

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

相关文章：