最近维护一个PHP项目,那个bootStrap用的我头疼,有交互行为的组件或者方法还是自己简单写出来的顺手。不然维护起来实在太麻烦了。
const $modal = function ( content= '' , width= "400" , height= "300" , waperClose= true , showArrow) {
let div = document. createElement ( 'div' ) ;
div. classList. add ( 'my-modal' ) ;
let inHtml = ` <div class="waper"> ${ content} <div class="arrow">x</div></div> ` ;
document. body. appendChild ( div) ;
div. innerHTML = inHtml;
$ ( '.my-modal' ) . css ( {
position: 'fixed' ,
'z-index' : 2000 ,
top: 0 ,
left: 0 ,
width: '100vw' ,
height: '100vh' ,
display: 'flex' ,
'align-items' : 'center' ,
'justify-content' : 'center' ,
'background' : 'rgba(100,100,100,0.5)' ,
} ) . click ( e => {
if ( waperClose) div. remove ( ) ;
} )
$ ( '.my-modal .waper' ) . css ( {
width: width+ 'px' ,
height: height+ 'px' ,
background: '#fff' ,
position: 'relative' ,
'border-radius' : '3px' ,
'padding' : '10px 15px' ,
'box-shadow' : '0 0 6px 3px rgba(50,50,50,0.2)'
} ) . click ( e => {
e. stopPropagation ( ) ;
} )
if ( showArrow)
$ ( '.my-modal .arrow' ) . css ( {
position: 'absolute' ,
right: '10px' ,
top: '0px' ,
transform: 'scaleX(1.3)' ,
cursor: 'pointer' ,
fontSize: '14px'
} ) . click ( ( ) => {
div. remove ( ) ;
} )
}