Enhance User Experience Using Browser Storage and Modal Pop-up Windows
The storage functionality is used to display a pop-up window if the browser storage does not contain an entry about the open pop-up. The function is mainly used to create windows for: accepting the terms and conditions, information about cookies, or asking about the user's age of majority. The open modal or website element should contain a call-to-action button that will allow you to add an entry in the browser storage, which will prevent the window from being reopened. The buttons added below will allow you to better understand the functionality:
The following functionality has been added to the buttons:
- Clear Storage - button used to remove all data from the browser's storage.
- Accept compsoul modal - clicking the button signifies a nominal acceptance of the message, which results in adding a variable defined in the settings to the browser's storage.
- Show Storage - the event assigned to the button displays the contents of the storage.
As we can see, when the page is loaded, a test modal defined by the following instance is run:
.compsoul-modal-container {
background: #000000BF;
bottom: 0;
left: 0;
opacity: 0;
pointer-events: none;
position: fixed;
right: 0;
top: 0;
transition: opacity 0.4s;
will-change: opacity;
z-index: 6;
}
.compsoul-modal-container.modal-active {
opacity: 1;
pointer-events: auto;
}
.compsoul-modal-container.modal-close {
pointer-events: auto;
}
.modal-unset, .modal-unset:before, .modal-unset:after, .compsoul-modal-container.modal-unset, .compsoul-modal-main.modal-unset {
animation: unset !important;
transition: none !important;
}
.compsoul-modal-container:before {
animation: compsoul-modal-loading 1s infinite;
border-bottom: 0.5em solid #ffffff00;
border-left: 0.5em solid #ffffff;
border-right: 0.5em solid #ffffff;
border-top: 0.5em solid #ffffff00;
border-radius: 100%;
box-sizing: content-box;
content: "";
font-size: 4px;
height: 6em;
left: 50%;
opacity: 1;
position: absolute;
top: 50%;
transform: translate3d(-50%, -50%, 0);
transition: opacity 0.4s;
will-change: opacity;
width: 6em;
}
.compsoul-modal-container.modal-ready:before, .compsoul-modal-container.modal-error:before {
animation-play-state: paused;
opacity: 0;
}
@keyframes compsoul-modal-loading {
from {
transform: translate3d(-50%, -50%, 0) rotate(0deg);
}
to {
transform: translate3d(-50%, -50%, 0) rotate(360deg);
}
}
.compsoul-modal-container:after {
color: #ffffff;
content: "\26A0";
font-size: 42px;
font-weight: 200;
left: 50%;
margin: -6px 0 0 0;
opacity: 0;
position: absolute;
top: 50%;
transform: translate3d(-50%, -50%, 0);
transition: opacity 0.4s;
will-change: opacity;
}
.compsoul-modal-container.modal-error:after {
opacity: 1;
}
.compsoul-modal-main {
left: 50%;
max-height: calc(2 * 40vh);
opacity: 0;
position: absolute;
top: 50%;
transform: translate3d(-50%, calc(-50% - 100px), 0);
transition: transform 0.4s 0.4s, opacity 0.4s 0.4s;
width: 800px;
z-index: 1;
will-change: transform, opacity;
}
.modal-ready.modal-active .compsoul-modal-main {
opacity: 1;
transform: translate3d(-50%, -50%, 0);
}
.modal-change .compsoul-modal-main {
transition: transform 0.4s, opacity 0.4s;
}
.compsoul-modal-main:before {
background: #fff;
border-radius: 8px;
bottom: -32px;
box-shadow: 0 5px 26px 0 rgba(0, 0, 0, 0.22), 0 20px 28px 0 rgba(0, 0, 0, 0.30);
content: "";
left: -32px;
position: absolute;
right: -32px;
top: -32px;
z-index: -1;
}
.compsoul-modal-content {
background: #fff;
line-height: 1.2;
overflow-y: auto;
max-height: calc(2 * 40vh);
padding: 0 32px 0 0;
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.compsoul-modal-content:after {
content: "";
display: table;
clear: both;
}
.compsoul-modal-close {
right: 8em;
position: absolute;
top: 8em;
z-index: 2;
}
.compsoul-modal-next {
right: 8em;
position: absolute;
top: 50%;
transform: translate3d(0, -50%, 0);
z-index: 2;
}
.compsoul-modal-prev {
left: 8em;
position: absolute;
top: 50%;
transform: translate3d(0, -50%, 0);
z-index: 2;
}
.compsoul-modal-close, .compsoul-modal-next, .compsoul-modal-prev {
background: #000000;
border: none;
cursor: default;
font-size: 2.6px;
height: 16em;
opacity: 0;
outline: 1px solid #e7a14f00;
padding: 0;
text-align: center;
transition: opacity 0.4s, outline 0.4s;
width: 16em;
}
.compsoul-modal-close:focus, .compsoul-modal-close:focus-within, .compsoul-modal-next:focus, .compsoul-modal-next:focus-within, .compsoul-modal-prev:focus, .compsoul-modal-prev:focus-within {
outline: 1px solid #e7a14fff;
}
.compsoul-modal-close, .compsoul-modal-next.modal-active, .compsoul-modal-prev.modal-active {
cursor: pointer;
opacity: 1;
}
.compsoul-modal-close:before, .compsoul-modal-close:after, .compsoul-modal-next:before, .compsoul-modal-prev:before {
border-top: 1em solid #ffffff;
border-right: 1em solid #ffffff;
box-sizing: content-box;
content: "";
cursor: pointer;
display: inline-block;
height: 4em;
padding: 0 0 1em 1em;
transform: rotate(45deg) translate3d(-25%, 25%, 0);
transition: opacity 0.4s, border 0.4s;
width: 4em;
}
.compsoul-modal-close:before, .compsoul-modal-close:after {
height: 3em;
width: 3em;
}
.compsoul-modal-close:hover:before, .compsoul-modal-close:hover:after, .compsoul-modal-next:hover:before, .compsoul-modal-prev:hover:before {
border-top: 1em solid #e7a14f;
border-right: 1em solid #e7a14f;
}
.compsoul-modal-close:after, .compsoul-modal-prev:before {
transform: rotate(-135deg) translate3d(-25%, 25%, 0);
}
.compsoul-modal-close:before {
transform: rotate(45deg) translate3d(-7%, 7%, 0);
}
.compsoul-modal-close:after {
transform: rotate(-135deg) translate3d(-7%, 7%, 0);
}
.compsoul-modal-timer {
height: 3px;
left: 0;
position: absolute;
top: 0;
z-index: 5;
width: 100%;
}
.compsoul-modal-timer:before {
animation: compsoul-slide-timeline 8s linear forwards;
animation-play-state: paused;
background: #e7a14f;
content: "";
display: block;
height: 100%;
transform: translate3d(-100%, 0, 0);
width: 100%;
}
.modal-ready .compsoul-modal-timer:before {
animation-play-state: running;
}
.compsoul-modal-container:hover .compsoul-modal-timer:before {
animation-play-state: paused;
}
@keyframes compsoul-slide-timeline {
from {
transform: translate3d(-100%, 0, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
@media only screen and (max-width: 1060px) {
.compsoul-modal-main {
width: calc(100% - 94px);
}
.compsoul-modal-main:before {
bottom: -12px;
left: -12px;
right: -12px;
top: -12px;
}
.compsoul-modal-close, .compsoul-modal-next, .compsoul-modal-prev {
font-size: 2px;
}
.compsoul-modal-close {
right: 0;
top: 0;
}
.compsoul-modal-next {
right: 0;
}
.compsoul-modal-prev {
left: 0;
}
}
.modal-box {
background: #fff;
border-radius: 5px;
box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.2);
box-sizing: border-box;
display: block;
font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
height: 0;
margin: 32px auto;
overflow: hidden;
transition: height 0.4s;
width: 264px;
}
.modal-box.modal-active {
height: 180px;
}
.modal-box-content {
padding: 24px 32px;
}
.modal-box-open {
margin: 21px auto;
}
<script src="https://compsoul.dev/uploads/js/compsoul.js"></script><script src="https://compsoul.dev/uploads/js/modal.js"></script><script>
new Compsoul("#local-storage-clear").on("click", () => {
window.localStorage.clear();
});
new Compsoul("#local-storage-show").on("click", () => {
new Compsoul("#local-storage").html(JSON.stringify(window.localStorage));
});
new Modal("#modal").options({
storage: "compsoul",
storageAgreement: "#local-storage-accept",
clone: "#modal-content"
}).init();
</script>
With such a declared instance, we can create a module that, while loading the page, will check if a variable declared in the storage property is located in the browser's storage. In the case of the above instance, this is the variable compsoul. The application checks during page loading if the name given as the value of the storage property is in the browser's storage. The module is run if the previously declared variable is not found. Automatic popup launch will be disabled after adding the declared variable to the storage.
Thank You for Reading
We hope you enjoyed this post! If you did, please consider following us on Facebook and leaving a like and a comment. If you have any questions or need assistance, feel free to use our contact form or email us at daniel@compsoul.dev. For urgent inquiries, you can reach us by phone at +48 732 846 416.