Popup Maker Tool
close
Popup Maker Tool

Popup Maker Tool






×
My Modal Image

{{heading}}

{{text}}


Modal Setup

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


Modal Style



Modal Border


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


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


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

×Info
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.

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



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


Milliseconds 1000ms = 1sec

×Info
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
https://feedburner.google.com/fb/a/mailverify?uri=softwebtuts/NiEc
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.



<style>.{{class}}{
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;
}
.{{class}}-content{
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;
}
.{{class}}-close{
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;
}
.{{class}}-close:hover{
color: #3b3b3b !important;
}
.{{class}}-img img{
width: {{imgwidth}}% !important;
background:transparent !important;
display:block;
margin:auto;
}
.{{class}}-text{
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;
}
.{{class}}-footer{
padding: 20px 30px !important;
color: rgba(255, 255, 255, 0.5) !important;
width: auto !important;
background-color: {{footerbg}} !important;
margin:-15px !important;
}
input[type=text].{{class}}-input{
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;
}
input[type=submit].{{class}}-submit-btn{
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) {
input[type=text].{{class}}-input{
width:90% !important;
margin-bottom: 0px !important;
}
input[type=submit].{{class}}-submit-btn{
width:90% !important;
}
.{{class}}-text p{
font-size: 15px !important;
}
}
</style>
<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>
<div class="{{class}}-text">
<h2>{{heading}}</h2>
<p>{{text}}</p>
</div>
<div class="{{class}}-footer">
<form action="https://feedburner.google.com/fb/a/mailverify" method="post"
onsubmit='window.open("https://feedburner.google.com/fb/a/mailverify?uri={{fbbn}}/NiEc",
"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}}"/>
</form>
</div>
</div>
<script>
//<![CDATA[ 
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";
}
}//]]>
</script>



Disqus Codes

No comments

Notifications

Disqus Logo