製作一個JavaScript彈出窗口可拖動

我正在創建一個JavaScript彈出窗口。代碼如下。製作一個JavaScript彈出窗口可拖動

的HTML：

<div id="ac-wrapper" style='display:none' onClick="hideNow(event)"> 
    <div id="popup"> 
     <center> 
      <h2>Popup Content Here</h2> 
      <input type="submit" name="submit" value="Submit" onClick="PopUp('hide')" /> 
     </center> 
    </div> 
</div>

的CSS：

#ac-wrapper { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: url("images/pop-bg.png") repeat top left transparent; 
    z-index: 1001; 
} 
#popup { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border-radius: 18px; 
    -moz-border-radius: 18px; 
    -webkit-border-radius: 18px; 
    height: 361px; 
    margin: 5% auto; 
    position: relative; 
    width: 597px; 
}

腳本：

function PopUp(hideOrshow) { 
    if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none"; 
    else document.getElementById('ac-wrapper').removeAttribute('style'); 
} 
window.onload = function() { 
    setTimeout(function() { 
     PopUp('show'); 
    }, 0); 
} 

function hideNow(e) { 
    if (e.target.id == 'ac-wrapper') document.getElementById('ac-wrapper').style.display = 'none'; 
}

的的jsfiddle鏈接：

http://jsfiddle.net/K9qL4/2/

的問題：

上述腳本工作正常，但我需要做彈出拖動。

來源

2014-05-19 Nitesh

使用

.draggable();

jQuery的功能，這裏是你更新的提琴：

http://jsfiddle.net/N9rQK/

如果你不想使用jQuery，你應該閱讀此主題：Draggable div without jQuery UI

來源

2014-05-19 12:19:34 Superdrac

我不確定OP是否想用jQuery作爲他的小提琴是純粹的JavaScript。 – Smeegs

感謝Superdrac，但我沒有在這裏使用jQuery ..我使用純javaScript ..感謝您的時間.. +1爲您的努力 – Nitesh

純JavaScript ===重新發明輪子，恕我直言 –

這裏有一些代碼可以做你想做的。它僅依賴名爲drag的對象來存儲其所有值，但您可以輕鬆修改它。該示例依賴於存在ID爲mydiv（在此實例中使用document.write()來提供該ID）的div，其position屬性爲absolute或fixed。你可以看到它在行動Jamie

document.write("<" + "div id='mydiv' style='background:blue; width:100px;" 
    "height:100px; position:fixed;'>" + "<" + "/div>") 

drag  = new Object() 
drag.obj = document.getElementById('mydiv') 

drag.obj.addEventListener('mousedown', function(e) 
{ 
    drag.top = parseInt(drag.obj.offsetTop) 
    drag.left = parseInt(drag.obj.offsetLeft) 
    drag.oldx = drag.x 
    drag.oldy = drag.y 
    drag.drag = true 
}) 

window.addEventListener('mouseup', function() 
{ 
    drag.drag = false 
}) 

window.addEventListener('mousemove', function(e) 
{ 
    drag.x = e.clientX 
    drag.y = e.clientY 
    var diffw = drag.x - drag.oldx 
    var diffh = drag.y - drag.oldy 

    if (drag.drag) 
    { 
     drag.obj.style.left = drag.left + diffw + 'px' 
     drag.obj.style.top = drag.top + diffh + 'px' 
     e.preventDefault() 
    } 
})

來源

2014-05-19 14:26:55

好吧我會試試這個腳本並檢查它是否適用於我..感謝您的時間.. +1的努力。 – Nitesh

製作一個JavaScript彈出窗口可拖動

回答

相關問題