Web Component: j-FloatingBox
j-FloatingBox
- singleton
- supports dark mode
Configuration:
zindex {Number}
a default z-index for forms (default:10
)
Methods:
component.show(opt)
shows a boxopt.id {String}
required - a box identifieropt.element {HTML Element}
required - target element- or you can use absolute position:
opt.x {Number}
opt.y {Number}
opt.offsetX {Number}
affects offset Xopt.offsetY {Number}
affects offset Yopt.align {String}
alignleft
(default),center
orright
opt.position {String}
aligntop
(default),bottom
opt.minwidth {Number}
opt.maxwidth {Number}
opt.mouseleave {String}
a link to the method, it's executed when the mouse cursor leaves the boxfunction(e, close)}
opt.autofocus {Boolean}
tries to focus first input/textareaopt.hide {String}
a link to the methodfunction(box_element)
opt.show {String}
a link to the methodfunction(box_element)
opt.autohide {Boolean}
enables hiding a box after clicking on itopt.delay {Number}
a simple delay for rendering (default:0
)opt.scrolltop {Boolean}
it deducts scroll top position from the current offset Y (default:false
)opt.url {String}
optional, URL address for the contentopt.path {String}
will replace all~PATH~
phrases in the downloaded templateopt.ID {String}
will replace all~ID~
phrases in the downloaded template
component.hide()
hides the last open boxcomponent.hide([box_id])
hides the specific box and its all nested boxescomponent.hide(true)
hides all boxes
Boxes
<div class="floatingbox" data-id="yourid" data-config="">
Your content
</div>
Configuration:
init {String}
a link to the method, it's executed when the box is initialized the first timefunction(element)
reload {String}
a link to the methodfunction(element)
hide {String}
a link to the method, it's executed when the box is going to hidefunction(element)
scope {String}
a custom scope/plugin namezindex {Number}
a custom z-index for this box
Author
- Peter Širka petersirka@gmail.com
- License
Created
29. september 2021
Updated
14. march 2023
Version
v1
License
https://www.totaljs.com/license/
Dark mode
Yes
Responsive
Yes
Author
Peter Širka
Email
petersirka@gmail.com
