Javascript 如何轻松关闭弹出窗口?

Javascript 如何轻松关闭弹出窗口?,javascript,popup,Javascript,Popup,我还在学习JavaScript,我给自己做了一些练习。我已经创建了一个类似div的小弹出窗口(因为我不知道如何创建一个实际的弹出窗口),它工作得很好。然而,我不知道如何用transition缓慢地关闭div,但它会立即关闭 The code is located below: 这是w3schools的代码,但这是您想要的。W3schools是一个非常适合初学者的网站,所以请查看javascript和jquery教程 <!DOCTYPE html> <html> <

我还在学习JavaScript,我给自己做了一些练习。我已经创建了一个类似div的小弹出窗口(因为我不知道如何创建一个实际的弹出窗口),它工作得很好。然而,我不知道如何用transition缓慢地关闭div,但它会立即关闭

The code is located below: 

这是w3schools的代码,但这是您想要的。W3schools是一个非常适合初学者的网站,所以请查看javascript和jquery教程

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide(1000);
    });
});
</script>
</head>
<body>

<button>Hide</button>

<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>

</body>
</html>

$(文档).ready(函数(){
$(“按钮”)。单击(函数(){
美元(p).隐藏(1000);;
});
});
隐藏
这是一段内容很少的段落

这是另一小段


如果您可以将代码粘贴到问题本身中,最好删除css属性dispaly:none,并将其替换为不透明度:0。因为display属性不支持任何动画转换嘿,谢谢,我会在几分钟内尝试使用它,但我正在Udemy上向Colt学习,这是我的小项目。经常使用W3Schools,但尝试使用vanilla js。我会试试这个,给我几分钟。你可以把带有src的脚本和带有实际代码的脚本直接放到你的html文件中,然后把$(“p”)的id改为你想要隐藏的div的id。我认为这是你能尝试的最简单的事情。嘿,伙计,它现在起作用了,tnx:)。还有一个问题,当我关闭它的时候,它关闭了,它不是正常关闭,而是向上和向左。我怎样才能使它上升而关闭呢?喜欢过渡效果。是的,您可以添加另一个脚本,但这次调用show()。因此,当你再次单击按钮时,它将弹出相同的隐藏分区。不,我正在尝试创建类似于弹出窗口的内容。首先,我尝试编辑alert();在js上,但我没能做到。然后我创建了一个div,当单击yes时它将消失,直到重新加载页面时才会显示。所以我的想法是,我创造一些东西,会问你你做了什么?如果否,重定向到特定链接,如果是,它将消失。这很好用,但当我点击yes时,它会在消失时向上向左移动。有没有办法控制它关闭的方式?就像一部动画。。。