Below are codes for Automatically Open the Popup cookiealert. Please let me know your feedback.
Here is CSS code :-
.cookiealert {
padding: 15px;
text-align: center;
}
body{
background: #033366;
}
#popupformsss{
background: #ffff33;
border-radius: 0.2em;
box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
letter-spacing: 0.05em;
line-height: 1.6;
padding: 15px 15px;
width: 60%;
align-self: flex-start;
transition: all 0.5s ease;
margin: 0 auto;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: fit-content;
}
#popupformsss .acceptcookies {
display: flex;
flex-direction: column;
align-content: center;
background: #282c34;
border-radius: 50%;
justify-content: center;
position: absolute;
right: -10px;
top: -10px;
font-size: 15px;
width: 30px;
height: 30px;
color: #d1d1d1;
cursor: pointer;
}
Here is the code for HTML :-
<html>
<head>
<!-- cookiealert styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Wruczek/Bootstrap-Cookie-Alert@gh-pages/cookiealert.css">
</head>
<body>
<!-- Popup Alter start -->
<div class="alert text-center cookiealert" style="display:none" id="popupformsss">
<label for="modal-trigger-center" class="acceptcookies" id="acceptbtn" aria-label="Close" onclick="document.getElementById('auto-videoss').pause();">✖</label>
<video style="width:100%;max-height:100%" id="auto-videoss" autoplay muted loop controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
</video>
<!--<button type="button" class="btn btn-primary btn-sm acceptcookies" id="acceptbtn" aria-label="Close" style="padding: 10px 15px;background-color: #0064b2;border-color: #018edd;font-size: .6875rem;font-weight: 500;text-transform: uppercase;">
Accept
</button>
<button type="button" class="btn btn-default btn-sm" id="closecookie" data-dismiss="modal" style="padding: 10px 15px;background: lightgray;color: #000;font-size: .6875rem;font-weight: 500;">
Decline
</button>-->
</div>
<!-- Popup Alter ends -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!-- Include cookiealert script -->
<script src="https://cdn.jsdelivr.net/gh/Wruczek/Bootstrap-Cookie-Alert@gh-pages/cookiealert.js"></script>
<script>
$(window).on('load', function(){
if(localStorage.getItem('quiz-popup') != 'true'){
$('#popupformsss').delay(20).fadeIn();
}
$('#acceptbtn').click(function()
{
$('#popupformsss').fadeOut(100);
localStorage.setItem('quiz-popup','true')
});
$('#closecookie').click(function(e)
{
$('#popupformsss').fadeOut();
});
});
</script>
</body>
</html>