Implementing a modal screen on your website allows you to convey important information to users or prompt them to fill out forms.
Especially by displaying the modal in full browser size, you can draw more attention and ensure users focus on the content.
This article explains how to easily implement a full-screen modal using the jQuery plugin fullmod.js.
From basic CSS and HTML to JavaScript for opening and closing the modal, we’ll walk you through everything in a beginner-friendly manner.
CSS to Display Modal in Full Browser Size
*Load the fullmod.min.css file. Below is the CSS for the full-screen modal (.fullmod). Feel free to modify as needed.
<link rel="stylesheet" href="fullmod.min.css">
<style type="text/css">
body {
text-align: center;
}
h1 {
text-align: center;
font-size: 22px;
padding: 20px 0;
line-height: 1.4em;
}
button {
padding: 10px;
font-size: 16px;
}
.fullmod {
color: #ffffff;
background-color: #cccccc;
}
</style>
HTML to Display Modal in Full Browser Size
*Use onclick=showModal() to display the modal with id="myFullMod".
The modal closes when the close button (class=”btn-close”) is clicked. Modify as needed.
<h1>Click the "Open Modal" button to display the modal screen</h1>
<button onclick="showModal()">Open Modal</button>
<div id="myFullMod" class="fullmod">
<div class="fullmod-content">
<div class="fullmod-head">
<h2 class="title">Modal Opened</h2>
<div class="buttons">
<a href="#" class="btn-close">×</a>
</div>
</div>
<div class="fullmod-body">
<p>Click the "×" in the top right corner to close the modal</p>
</div>
</div>
</div>
JavaScript to Display Modal in Full Browser Using fullmod.js
*Load jquery.min.js and fullmod.js.
Use $(modalArea).fullmod({options}) to initialize. You can configure callbacks like onShowing/onHidden.
In the example below, console.log is used for demonstration. Modify as needed.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="fullmod.js"></script>
<script>
var myFullMod = $('#myFullMod').fullmod({
onShowing: function (params) {
console.log('showing');
},
onShown: function () {
console.log('shown');
},
onHiding: function (params) {
console.log('hiding');
},
onHidden: function () {
console.log('hidden');
}
});
function showModal() {
myFullMod.show();
}
</script>
Demo Page: Displaying Full Browser Modal with fullmod.js
Demo Page for Displaying Full-Screen Modal with fullmod.js
Source: FullMod
Here is the source:
FullMod
Summary
With fullmod.js, you can easily create full-screen modal windows.
Just one button click smoothly opens/closes the modal, and you can customize its behavior using options such as callbacks for show/hide events.
Use the sample code provided to implement a modal that suits your website.
A well-designed modal can improve user interaction and help convey critical information more effectively.
*Please use at your own risk if reusing this code.
Do not reuse the Google Analytics tag found in the demo page’s <head> section.
