Popup Maker Tool

Popup Maker Tool

My Modal Image



Modal Setup

Class name is required if it is blank then you will get errors or your modal will not work.

Modal Style

Modal Border

If you want to set color border set the border image to none.

If the border width is 0 it means there will be no border.

Enter Your border image url below in input field if you don't have that then select one from drop-down below.

The border-image-slice property specifies how to slice the image specified by border-image-source. The image is always sliced into nine sections: four corners, four edges and the middle.
The "middle" part is treated as fully transparent, unless the fill keyword is set.

The border-image-repeat property specifies whether the border image should be repeated, rounded or stretched.

Turn it on if you want to display your modal if ad-blocker is detected.
Turn it on if you want to display your modal if the user id offline.

Milliseconds 1000ms = 1sec

Don't enter feedburner url anter your feedburner username just. Here is how you can get your feedburner id.
In my case in the feedburner url below
highlighted text or softwebtuts is my feedburner username if you want more info please contact to the admin.

Generated Code

You are all setup now here is the generated code for your designed modal use as it is provided.

Copy the code below and paste if just before </head>

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css'/>

Now copy this code and paste on that page where you want to show up this modal popup or if you want to show this on every page of your website for that just create an widget in your CMS admin panel and paste this code in that widget.

display: none;
position: fixed !important;
z-index: 9999 !important;
padding-top: 100px !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: 100% !important;
overflow: auto !important;
background-color: rgb(0,0,0) !important;
background-color: rgba(0,0,0,0.4) !important;
background-color: {{bgcolor}} !important;
width: 100% !important;
padding: 15px !important;
overflow: hidden !important;
position: relative !important;
box-sizing: border-box !important;
max-width: 650px !important;
margin:auto !important;
border-radius:{{borderr}}px !important;
border: {{mbw}}px {{mbs}} {{mbc}} !important;
padding: 15px !important;
-webkit-border-image: url({{mbi}}) {{mbwin}} {{bio}} !important; /* Safari 3.1-5 */
-o-border-image: url({{mbi}}) {{mbwin}} {{bio}} !important; /* Opera 11-12.1 */
border-image: url({{mbi}}) {{mbwin}} {{bio}} !important;
font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif !important;
font-size: 20px !important;
float: right !important;
font-weight: 700 !important;
color: {{txtcolor}} !important;
font-size: 25px !important;
margin-top: -10px !important;
transition: all .2s !important;
cursor: pointer !important;
width: auto !important;
color: #3b3b3b !important;
.{{class}}-img img{
width: {{imgwidth}}% !important;
background:transparent !important;
text-align: center !important;
color:{{txtcolor}} !important;
.{{class}}-text h2{
font-size: 24px !important;
font-weight: 600 !important;
font-family: {{hfont}} !important;
.{{class}}-text p{
font-size: 17px !important;
margin-top: -15px !important;
margin-bottom: 50px !important;
font-family: {{btfont}} !important;
padding: 20px 30px !important;
color: rgba(255, 255, 255, 0.5) !important;
width: auto !important;
background-color: {{footerbg}} !important;
margin:-15px !important;
color: rgba(0, 0, 0, 0.5) !important;
width:80% !important;
background: rgb(255, 255, 255) !important;
border: none !important;
border-radius: 3px !important;
outline: rgba(0, 0, 0, 0.5) none 0px !important;
padding: 14px !important;
display: inline-block !important;
padding: 17px !important;
font-family: 'Open Sans', sans-serif !important;
font-size: 14px !important;
background-color: {{btnbg}} !important;
color:{{btncolor}} !important;
width:auto !important;
border:none !important;
cursor: pointer !important;
border-radius: 3px !important;
margin-bottom: -13px !important;
@media screen and (max-width: 27em) {
width:90% !important;
margin-bottom: 0px !important;
width:90% !important;
.{{class}}-text p{
font-size: 15px !important;
<button id="open-popup-{{class}}" class="btn">Open Model</button>
<div id="popup-{{class}}" class="{{class}}">
<div class="{{class}}-content animated {{animation}}">
<a class="{{class}}-close">×</a>
<div class="{{class}}-img">
<img src="{{data.b64}}" alt="Alt"/>
<div class="{{class}}-text">
<div class="{{class}}-footer">
<form action="https://feedburner.google.com/fb/a/mailverify" method="post"
"popupwindow", "scrollbars=yes,width=550,height=520"); return true' target="popupwindow">
<input type="text" class="{{class}}-input" placeholder="{{placeholder}}"/>
<input type="submit" class="{{class}}-submit-btn" value="{{btntext}}"/>
var modal = document.getElementById('popup-{{class}}');
var btn = document.getElementById("open-popup-{{class}}");
var span = document.getElementsByClassName("{{class}}-close")[0];
btn.onclick = function() {
modal.style.display = "block";
span.onclick = function() {
modal.style.display = "none";
window.onload = function() {
setTimeout(function() {
modal.style.display = 'block';
}, {{showafterdelay}});
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";

No Comment

Help us improve this article by leaving your feedback below.
Add Comment
Previous Post Next Post