Question

我正在创建一个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/

问题：

上面的脚本运行正常，但我需要让popUp可拖动。

Answer 1

使用

.draggable();

jquery函数，这是你更新的小提琴：

http://jsfiddle.net/N9rQK/

如果你不想使用jQuery，你应该阅读这个主题：Draggable div without jQuery UI

Answer 2

这里有一些代码可以满足您的需求。它仅依赖于名为drag的对象来存储其所有值，但您可以轻松地更改它。该示例依赖于一个id为mydiv的div（在此实例中使用document.write()来提供）具有position属性absolute或{的{ {1}}。您可以在Jamie

看到它的实际效果

fixed

使javascript弹出窗口可拖动

2 个答案: