Main Content
Popup Styles
Standard Wireframing Elements
Popup Styles 1
Close
HTML
<section id="hero">
<div id="popup-demo1">
<canvas width="1600" height="639" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/banner-sample.jpg);"></canvas>
<div class="aiosp-container aiosp-inline-holder"><div class="aiosp-content aios-popup-body">
<div id="test">This is just AIOS Popup Content Preview</div>
<button title="%title%" type="button" class="aiosp-close">×</button></div>
</div>
</div>
</section>
CSS
#popup-demo1{
}
#popup-demo1 canvas{
display:block;
width: 100%;
}
#popup-demo1 .aiosp-container{
background-color: rgba(0,0,0,.8);
}
#popup-demo1 .aiosp-container .aiosp-content.aios-popup-body {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #fff;
width: 47%;
min-height: 400px;
max-width: 400px;
}
CSS Mobile
Javascript
This is just AIOS Popup Content Preview
Popup Styles 2
Close
HTML
<section id="hero">
<div id="popup-demo2">
<canvas width="1600" height="639" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/banner-sample.jpg);"></canvas>
<div class="aiosp-container aiosp-inline-holder"><div class="aiosp-content aios-popup-body">
<div id="test">This is just AIOS Popup Content Preview</div>
<button title="%title%" type="button" class="aiosp-close">×</button></div>
</div>
</div>
</section>
CSS
#popup-demo2{
}
#popup-demo2 canvas{
display:block;
width: 100%;
}
#popup-demo2 .aiosp-container{
background-color: rgba(0,0,0,.8);
}
#popup-demo2 .aiosp-container .aiosp-content.aios-popup-body {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #fff;
width: 47%;
min-height: 400px;
max-width: 710px;
}
CSS Mobile
Javascript
This is just AIOS Popup Content Preview
Popup Styles 3
Close
HTML
<section id="hero">
<div id="popup-demo3">
<canvas width="1600" height="639" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/banner-sample.jpg);"></canvas>
<div class="aiosp-container aiosp-inline-holder"><div class="aiosp-content aios-popup-body">
<div id="test">This is just AIOS Popup Content Preview</div>
<button title="%title%" type="button" class="aiosp-close">×</button></div>
</div>
</div>
</section>
CSS
#popup-demo3{
}
#popup-demo3 canvas{
display:block;
width: 100%;
}
#popup-demo3 .aiosp-container{
background-color: rgba(0,0,0,.8);
}
#popup-demo3 .aiosp-container .aiosp-content.aios-popup-body {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #fff;
width: 47%;
min-height: 400px;
max-width: 386px;
}
CSS Mobile
Javascript
This is just AIOS Popup Content Preview
Popup Styles 4
Close
HTML
<section id="hero">
<div id="popup-demo4">
<canvas width="1600" height="639" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/banner-sample.jpg);"></canvas>
<div class="aiosp-container aiosp-inline-holder"><div class="aiosp-content aios-popup-body">
<div id="test">This is just AIOS Popup Content Preview</div>
<button title="%title%" type="button" class="aiosp-close">×</button></div>
</div>
</div>
</section>
CSS
#popup-demo4{
}
#popup-demo4 canvas{
display:block;
width: 100%;
}
#popup-demo4 .aiosp-container{
background-color: rgba(0,0,0,.8);
}
#popup-demo4 .aiosp-container .aiosp-content.aios-popup-body {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #fff;
width: 100%;
min-height: 400px;
max-width: 1140px;
}
CSS Mobile
Javascript
This is just AIOS Popup Content Preview
Popup Styles 5
Close
HTML
<section id="hero">
<div id="popup-demo5">
<canvas width="1600" height="639" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/banner-sample.jpg);"></canvas>
<div class="aiosp-container aiosp-inline-holder"><div class="aiosp-content aios-popup-body">
<div id="test">This is just AIOS Popup Content Preview</div>
<button title="%title%" type="button" class="aiosp-close">×</button></div>
</div>
</div>
</section>
CSS
#popup-demo5{
}
#popup-demo5 canvas{
display:block;
width: 100%;
}
#popup-demo5 .aiosp-container{
background-color: rgba(0,0,0,.8);
}
#popup-demo5 .aiosp-container .aiosp-content.aios-popup-body {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #fff;
width: 100%;
min-height: 332px;
max-width: 710px;
}
CSS Mobile
Javascript
This is just AIOS Popup Content Preview
Popup Styles 6
Close
HTML
<section id="hero">
<div id="popup-demo6">
<canvas width="1600" height="639" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/banner-sample.jpg);"></canvas>
<div class="aiosp-container aiosp-inline-holder"><div class="aiosp-content aios-popup-body">
<div id="test">This is just AIOS Popup Content Preview</div>
<button title="%title%" type="button" class="aiosp-close">×</button></div>
</div>
</div>
</section>
CSS
#popup-demo6{
}
#popup-demo6 canvas{
display:block;
width: 100%;
}
#popup-demo6 .aiosp-container{
background-color: rgba(0,0,0,.8);
}
#popup-demo6 .aiosp-container .aiosp-content.aios-popup-body {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #fff;
width: 100%;
min-height: 332px;
max-width: 710px;
}
CSS Mobile
Javascript
This is just AIOS Popup Content Preview