html弹窗从右向左划出,js实现上下左右弹框划出效果

效果图：

图(1)初始图

图(2)点击“从右侧划出”

代码如下：

上下左右弹框划出效果

/*css document*/

body,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,input,button,aside{ padding: 0; margin: 0; -webkit-tap-highlight-color:rgba(255,255,255,0);}

body { font-family: "Microsoft YaHei"; }

.btn button {

display: block;

width: 240px;

line-height: 30px;

margin: 20px auto;

background-color: #cd0000;

color: #fff;

text-align: center;

outline: none;

border: none;

cursor: pointer;

font-fami