Floating Modal Message Fixed on the Bottom of the Screen

Floating Modal Message Fixed on the Bottom of the Screen Demo

View Demo Full Screen View Demo New Tab

Floating Modal Message Fixed on the Bottom of the Screen Code

HTML

<div class='float-message'>
  <div class='float-message-inner'>
    <a href="#!" onclick="$('.float-message').hide();" class="close-link">X</a>
  	<p>Welcome to CSS Bundle! 🧑‍💻</p>
  </div>
</div>

CSS

.float-message {
	position:fixed;
  	z-index:1001;
  	max-width:400px;
  	bottom:20px;
  	right:20px;
  	padding:30px;
  	color:#444;
  	font-size:16px;
  	border-radius:5px;
  	background:#FFF;
  	box-shadow:0px 5px 10px rgba(0,0,0,0.5);
}
.float-message-inner {
	position:relative;
}
.close-link {
	text-decoration:none;
  	color:#444;
  	font-weight:bold;
  	position:absolute;
  	top:-15px;
  	right:-15px;
  	font-size:18px;
}

Scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>