hi,
like this : http://danielcampbell.ca/post-it
???
add this to 'custom HTML at top' :
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
jQuery( function() {
jQuery(".post").draggable();
} );
/* click div to bring to front */
jQuery(function() {
var maxz = jQuery('.post:last').css("zIndex");
jQuery(".post").on("drag",function(){
maxz++;
jQuery(this).css('z-index',maxz);
} );
/* fade in divs - set .post to opacity:0; /
jQuery('.post').each(function(i) {
jQuery(this).delay((i++) * 500).fadeTo(1000, .99).css({"margin-left":i100, "margin-top":i*100});
} );
/* close parent div on x */
jQuery('.close').on("click", function () {
$(this).parent('div').fadeOut();
});
});
});
</script>
and this to CSS
(modify as your like) :
/* post-it */
.post {
z-index: 1;
position: absolute;
width: 300px;
min-height: 200px;
padding: 20px;
opacity: 0;
overflow: scroll;
background-color: #ffffbc;
cursor: grab;
cursor: -webkit-grab;
}
.close {
display:inline-block;
}
.close::after {
content: "\00D7";
text-align: right;
display:inline-block;
position: absolute;
font-size: 30px;
font-weight: 100;
right: 12px;
top: 0px;
width: 20px;
height: 20px;
z-index: 3;
color: black;
}
div.close:hover:after {
color: red;
}
Have fun :D