Как сделать всплывающее окно с предупреждением

Question

Мне нужно создать сайт для компании, который поставляется со всплывающим тегом <div> с формой (формы у меня уже есть), а затем размывает фон

<style>
.divAlert .top {
display: inline-block;
background-color: lightcyan;
width: 45%;
height: 80px;
font-size: 20px;
font-family: Oswald;
border-top-left-radius: 20px;
border-top-roght-radius: 20px;
-webkit-transition: 0.5s;
}
.divAlert .top:hover {
width: 60%;
display: inline-block;
height: auto;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
background-color: lightsalmon;
translate: translateY(20px);
transition: 0.5s;
}
.divAlert .box{
width: 45%;
height: auto;
min-height: 100px;
max-height: 400px;
font-family: Colliegate;
display: inline-block;
}
.divAlert h1 {
color: white;
font-family: Poppins;
margin-left: 40px;
}
.divAlert .bottom {
background: linear-gradient(to bottom, #dda231 70%, lightred);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
-webkit-transition: 0.5s;
display: inline-block;
}
.divAlert .bottom:hover {
transform: translateY(20px);
transition: 0.5s;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
display: inline-block;
}
.content {
justify-content: center;
align-content: inline-block;
display: flex;
flex-direction: column;
text-align: center inline-block;
</style>
<div class="divAlert" id="dd2">
<div class="top">
<h1> Want to get emails straight to your inbox? </h1>
</div class="top">
<div class="box">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfCFb0w9RzliFRPnjUKElSu8st9ik9Y3sHzqGZ7EwUQqOkQvA/viewform?embedded=true" width="640" height="596" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
<p> Subscribe to emails and get notifiacations sent straight to your inbox! </p>
</div>
<div class="bottom">
<span id="close" onclick="document.getElementsByClassName('divAlert'([0].style.display= 'none' ;"><button>  &times; </button></span>

</div>
<script>
const timeout = document.getElementsByClassName('divAlert')
setTimeout(hideElement, 10000)
function hideElement() {
timeout.style.display = 'none'
}
var windower = document.getElementById('dd2')
window.onclick = function(event) {
setTimeout(hideElement, 00001)
function hideElement() {
dd2.style.display = 'none'
}
</script>

Это просто показать элемент, который не является липким, и когда вы щелкнете из него, элемент скроется. Но как сделать, чтобы тег <div> размыл фон и сделал экран не прокручиваемым? И как мне сделать всплывающее окно с благодарностью, когда они отправят форму?