Question

尝试使弹出窗口可拖动，以便可以在屏幕上移动。目前它不会停留在拖到位置。有可能吗？

HTML：

<body>
<h2>Popup</h2>
<button id="myBtn">Open popup</button>
<div id="myModal"  class="modal">
  <div class="modal-content" draggable="true" style="width:400px">
    <div class="modal-header" >
      <span class="close">&times;</span>
    </div>
    <div class="modal-body">
      <p>Some text in popup</p>
      <p>Some other text...</p>
    </div>
      </div>
</div>
</body>

使用Javascript：

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
    modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

Answer 1

您必须删除draggable属性

＆＃13;

var modal = document.getElementById('myModal'),btn = document.getElementById("myBtn"),span = document.getElementsByClassName("close")[0];
btn.onclick = function() {modal.style.display = "block"}
span.onclick = function() {modal.style.display = "none"}
window.onclick = function(event) {if (event.target == modal) {modal.style.display = "none"}}

//Get the item to move
var modalcontent = document.getElementsByClassName("modal-content")[0],
  startTop = 0,
  startLeft = 0;
function move(){
  //It is important that the element is in absolute position
  modalcontent.style.position="absolute";
  var event = arguments[0];
  modalcontent.style.top=event.pageY-startTop+"px";
  modalcontent.style.left=event.pageX-startLeft+"px";
}
//Get initial values when the mouse is pressed
modalcontent.addEventListener("mousedown", function(e){
  startTop = e.pageY - modalcontent.offsetTop;
  startLeft = e.pageX - modalcontent.offsetLeft;
  //Start the movement
  document.addEventListener("mousemove", move);
});
//When the mouse is released
document.addEventListener("mouseup", function(){
  //Stop motion
  document.removeEventListener("mousemove", move);
});

＆＃13;

.modal {display: none;/* Hidden by default */position: fixed;/* Stay in place */z-index: 1;/* Sit on top */padding-top: 100px;/* Location of the box */left: 0;top: 0;width: 100%;/* Full width */height: 100%;/* Full height */overflow: auto;/* Enable scroll if needed */background-color: rgb(0, 0, 0);/* Fallback color */background-color: rgba(0, 0, 0, 0.4);/* Black w/ opacity */}/* Modal Content */.modal-content {position: relative;background-color: #fefefe;margin: auto;padding: 0;border: 2px solid gray;width: 80%;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);-webkit-animation-name: animatetop;-webkit-animation-duration: 0.4s;animation-name: animatetop;animation-duration: 0.4s}/* Add Animation */@-webkit-keyframes animatetop {from {top: -300px;opacity: 0}to {top: 0;opacity: 1}}@keyframes animatetop {from {top: -300px;opacity: 0}to {top: 0;opacity: 1}}/* The Close Button */.close {color: white;float: right;font-size: 28px;font-weight: bold;}[draggable=true] {cursor: move;}.close:hover,.close:focus {color: #000;text-decoration: none;cursor: pointer;}.modal-header {padding: 2px 16px;background-color: green;color: white;height: 30px;}.modal-body {padding: 2px 16px;}.modal-footer {padding: 2px 16px;background-color: #5cb85c;color: white;}

＆＃13;

<h2>Popup</h2><button id="myBtn">Open popup</button><div id="myModal" class="modal"><div class="modal-content" style="width:400px"><div class="modal-header"><span class="close">&times;</span></div><div class="modal-body"><p>Some text in popup</p><p>Some other text...</p></div></div></div>

＆＃13;

Answer 2

您可以使用 jQuery的 UI库中的draggable()：

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
    modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
$( "#draggable" ).draggable();

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 2px solid gray;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
[draggable=true] {
    cursor: move;
}
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: green;
    color: white;
    height:30px;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<h2>Popup</h2>
<button id="myBtn">Open popup</button>
<div id="myModal"  class="modal">
  <div class="modal-content" id="draggable" draggable="true" style="width:400px">
    <div class="modal-header" >
      <span class="close">&times;</span>
    </div>
    <div class="modal-body">
      <p>Some text in popup</p>
      <p>Some other text...</p>
    </div>
      </div>
</div>
</body>

可拖动的HTML弹出窗口

2 个答案: