Automatically Open the Popup


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>

 



0 Comment

Add a comment