Simple Bootstrap Style Custom Modal Popup In JavaScript

Modal popups are used pretty frequently on the web. Some popular uses of them include driving newsletter sign-ups, displaying notifications/alerts, and handling register and login forms. Our modal will be generic which means you will be free to use it for whatever purpose you’d like.

Do you want a clean, responsive and simple modal popup that will appear on screen from the centre of the screen with a fixed position event the whole screen is able to scroll behind it in a simple way then here is the minified code with basic syntax to achieve your target in a simple and nice way? Before proceeding just have a look at the demo. It is fully responsive and made with pure Vanilla JavaScript and CSS3.

Here we have a modal same as Bootstrap but with only CSS and JavaScript. We created a lightweight and simple modal popup box that does not use any third-party libraries like Bootstrap and is cross-browser compatible. It is also using vanilla JavaScript without jQuery. Also, it is closeable by clicking on anywhere in the screen along with close button.

There are many code snippets available online or on many other blogs and websites but everyone is not able to optimize your blog or website so you need some optimized code snippet. So now checkout out the code snippet for your blog and website that will give you all features for your desired code. Now grab the ready to use code and paste it where you want.

Features:

1. Light Weight.
2. Pure Vanilla JavaScript.
3. Cross Browser.
4. No External Files.
5. Fully Customizable.
6. Single Line Function.

How To USe Simple Bootstrap Style Custom Modal Popup In JavaScript ?

There are a few easy and understandable steps to achieve your desired functionality using pure Vanilla JavaScript that we are gonna share below. Follow each step perfectly.

HTML:

<div class="custom_modal custom_show-modal">
<div class="custom_modal-content">
<span class="custom_close-button">×</span>
<h1>Hello, I am a modal!</h1>
<hr/>
<p>Click <b>Close</b> to close this.<br/><i>Or Click anywhere to close.</i></p>
</div>
</div>

JavaScript:

<script type="text/javascript">
const modal = document.querySelector(".custom_modal");
const closeButton = document.querySelector(".custom_close-button");
function toggleModal() {
modal.classList.toggle("custom_show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>

CSS:

<style type="text/css">
.custom_modal{position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:scale(1.1);transition:visibility 0s linear .25s,opacity .25s 0s,transform .25s;z-index:99999999999999;}
.custom_modal-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;padding:1rem 1.5rem;width:24rem;border-radius:.5rem}
.custom_close-button{float:right;width:1.5rem;line-height:1.5rem;text-align:center;cursor:pointer;border-radius:.25rem;background-color:#d3d3d3}
.custom_close-button:hover{background-color:#a9a9a9}
.custom_show-modal{opacity:1;visibility:visible;transform:scale(1);transition:visibility 0s linear 0s,opacity .25s 0s,transform .25s}
</style>

Customization:

No need to customize it. Just copy-paste. Rest edit the code as per comments and need.

Troubleshooting the Errors:

Do it with concentration and patience. Check your all steps and again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.

Final Words:

That’s all we have. We hope that you liked this article. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us If you have any doubts or problems please comment below. We are happy to help you! If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave.