關閉彈框事件 簡單的彈出框拖拽關閉事件

2021-10-19 04:50:39 字數 1609 閱讀 5235

彈出框拖拽關閉事件

margin:0;padding:0;

#box{

width:500px;

height:250px;

background:#f2f2f2;

border:1px #ccc solid;

border-radius:3px;

position:absolute;

left:calc(50% - 250px);

top:calc(50% - 150px);

.boxheader{

height:45px;

line-height:45px;

border-bottom:1px #ccc solid;

.title{

padding:0 15px;

color:#333;

float:left;

.close{

padding:0 15px;

color:#ccc;

font-size:20px;

float:right;

cursor: pointer;

.boxcont{

padding:25px 15px;

font-size:14px;

color:#666;

text-align:center;

標題內容

×我是內容我是內容我是內容我是內容我是內容

var close=document.getelementbyid('close');

close.οnclick=function(){

box.style.display='none';

box.οnmοusedοwn=function(e){

var ev= e||event;

var l=ev.clientx-box.offsetleft;

var t=ev.clienty-box.offsettop;

document.οnmοusemοve=function(e){

var ev = e||event;

var needleft=ev.clientx-l;

var needtop=ev.clienty-t;

//不超出左邊邊框

needleft<0?needleft=0:needleft;

//不超出上邊邊框

needtop<0?needtop=0:needtop;

//不超出右邊邊框

var maxleft=innerwidth-box.offsetwidth;

needleft>maxleft?needleft=maxleft:needleft;

//不超出底部邊框

var maxtop=innerheight-box.offsetheight;

needtop>maxtop?needtop=maxtop:needtop;

box.style.left=needleft+'px';

box.style.top=needtop+'px';

document.οnmοuseup=function(){

document.οnmοusemοve=document.οnmοuseup=null;

layer彈框,彈出後自動關閉

今天做專案,出現乙個問題,需求是用ajax做檔案上傳功能,寫好之後,測試發現問題。彈出層出現以後我沒有主動點選確定和關閉等操作,程式自動關閉了彈出層 一步一步排查,找到了錯誤,首先,先確認你頁面上有沒有發生重新整理或者其他彈出 我排查以後發現我form裡有個class,這個class就是ajax提交...

js實現彈出框的拖拽

html部分 彈出框確定 取消 css部分 wrap popupbox layer head layer head text layer close layer body layer footer layer footer button group layer footer button layer...

簡單的jQuery彈框外掛程式

要點 匿名函式包裹器 可搜尋一下 物件導向的程式設計 外掛程式的要素 擴充套件jquery本身的方法,extend 給jquery物件新增方法,對jquery.prototype進行擴充套件 新增乙個函式到jquery.fn jquery.prototype 物件,該函式的名稱就是你的外掛程式名稱 ...