Posted in
2792
1:13 am, May 18, 2022
Floating Modal Message Fixed on the Bottom of the Screen
What is title?
With the floating fixed modal code you can attach a message for your website users on the bottom right hand side of the screen.
This message will stay over the top of the content due to its fixed postition.
The message box can be closed by pressing the X on the right top of the message.
What can i use the Floating Modal Message for?
You could add a message to subscribe to the latest newsletter, or to advise of the site using cookies.
How to use Floating Modal Message
Add the html and css shown below to add the modal to your site. This also reqires the inclusion of jquery to hide the modal when the x is activated.
Preview of Floating Modal Message
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>
Add Comment
Other Items in CSS Modal
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
HTML Canvas
javascript