拖放整个 div 容器。 （移动弹出模态对话框）

Question

在这里，我有一个模态弹出窗口。 我想让模态可拖动。 而且我希望“确定”按钮在悬停时为绿色，而“取消”在悬停时应为红色。 我可以在单个 CSS 类中做到这一点吗？

 .hidModal{ position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.2); z-index: 500; opacity:2; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; } .windowModal { width: 400px; top:15%; position: fixed; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background:rgba(255, 204, 153,0.2); z-index: 501; opacity:0.5; background: -moz-linear-gradient(#ffe6cc, #ffa64d); background: -webkit-linear-gradient(#ffe6cc, #ffa64d); background: -o-linear-gradient(#ffe6cc, #ffa64d); } #winMod{ position: relative; } .windowModal:hover{ opacity: 1.0; } .closeMod { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: 5px; text-align: center; top: 4px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .closeMod:hover { background: #aaaaaa; color: #ff0022; cursor: pointer; } .bttnMod { background: #606061; color: #FFFFFF; line-height: 15px; text-align: center; width: 50px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .bttnMod:hover { background: #00d9ff; cursor: pointer; }

 <div class="hidModal"> <div id="winMod" class="windowModal"> <div style="margin-top: 1%;"> <input class="closeMod" type="button" name="Close" value="X" style="width:8%" onclick="winClose();" > <div style="margin-top: 1%;"> <label class="label lblwidth1">&nbsp;</label> <input class="bttnMod" type="button" name="OK" value="OK" onclick="clickok();" tabindex="1" style="width:50"> <input class="bttnMod" type="button" name="Cancel" value="Cancel" tabindex="2" style="width:55" onclick="winClose();"> </div> </div> </div>

我尝试了一些可能的方法。 但它没有用。 那些在 jQuery 中。 但我对这方面了解不多。 所以请帮我解决这个问题。 提前感谢您的帮助。

Answer 1

对于可拖动部分，如果您使用的是 JQuery，则有Draggable属性。

$("#your-modal").draggable(); 

您还可以指定将属性分配给模式的哪个部分（在此示例中，模式的标题）。

$("#your-modal").draggable({ handle: "#your-modal-header" });

至于按钮，您可以更改它们的背景颜色并使用:hover选择器添加一些过渡动画。 虽然我认为最好分别处理他们的课程，如下所示。

ok-button:hover {
  background-color: green;
  transition: 0.5s;
}

cancel-button:hover {
  background-color: red;
  transition: 0.5s;
}

片段：

 .hidModal { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.2); z-index: 500; opacity:2; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; } .windowModal { width: 400px; top:15%; position: fixed; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background:rgba(255, 204, 153,0.2); z-index: 501; opacity:0.5; background: -moz-linear-gradient(#ffe6cc, #ffa64d); background: -webkit-linear-gradient(#ffe6cc, #ffa64d); background: -o-linear-gradient(#ffe6cc, #ffa64d); } #winMod { position: relative; } .windowModal:hover { opacity: 1.0; } .closeMod { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: 5px; text-align: center; top: 4px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .closeMod:hover { background: #aaaaaa; color: #ff0022; cursor: pointer; } .bttnMod { background: #606061; color: #FFFFFF; line-height: 15px; text-align: center; width: 50px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .ok-button:hover { background-color: green; transition: 0.5s; } .cancel-button:hover { background-color: red; transition: 0.5s; }

 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> <div id="your-modal" class="hidModal"> <div id="winMod" class="windowModal"> <div style="margin-top: 1%;"> <input class="closeMod" type="button" name="Close" value="X" style="width:8%" onclick="winClose();"> <div style="margin-top: 1%;"> <label class="label lblwidth1">&nbsp;</label> <input class="ok-button bttnMod" type="button" name="OK" value="OK" onclick="clickok();" tabindex="1" style="width:50"> <input class="cancel-button bttnMod" type="button" name="Cancel" value="Cancel" tabindex="2" style="width:55" onclick="winClose();"> </div> </div> </div> </div> <script> $("#your-modal").draggable(); </script>

---

编辑：

对于无需包含 JQuery/JQueryUI（即纯 Javascript）的解决方案，您可以按照以下代码段进行参考。 添加了一些注释，因为与上面的代码段相比，它是相当多的额外代码行。

 // Get your modal by it's ID and declare it as a variable var modal = document.getElementById('your-modal'); // Declare variables for X and Y positions of your modal and mouse movements var posX, posY, mouseX, mouseY; // Triggers when the user clicks and holds the mouse down on your modal modal.addEventListener('mousedown', function (event) { posX = this.offsetLeft; posY = this.offsetTop; mouseX = event.clientX; mouseY = event.clientY; // Triggers when the user moves the mouse around as it's holding the click down this.addEventListener('mousemove', moveElement, false); // Triggers when the user lets go of the mouse window.addEventListener('mouseup', function () { modal.removeEventListener('mousemove', moveElement, false); }, false); }, false); // Function in charge of repositioning the modal function moveElement(event) { this.style.left = posX + event.clientX - mouseX + 'px'; this.style.top = posY + event.clientY - mouseY + 'px'; }

 .hidModal { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.2); z-index: 500; opacity: 2; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; } .windowModal { width: 400px; top: 15%; position: fixed; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: rgba(255, 204, 153, 0.2); z-index: 501; opacity: 0.5; background: -moz-linear-gradient(#ffe6cc, #ffa64d); background: -webkit-linear-gradient(#ffe6cc, #ffa64d); background: -o-linear-gradient(#ffe6cc, #ffa64d); } #winMod { position: relative; } .windowModal:hover { opacity: 1.0; } .closeMod { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: 5px; text-align: center; top: 4px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .closeMod:hover { background: #aaaaaa; color: #ff0022; cursor: pointer; } .bttnMod { background: #606061; color: #FFFFFF; line-height: 15px; text-align: center; width: 50px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .ok-button:hover { background-color: green; transition: 0.5s; } .cancel-button:hover { background-color: red; transition: 0.5s; }

 <div id="your-modal" class="hidModal"> <div id="winMod" class="windowModal"> <div style="margin-top: 1%;"> <input class="closeMod" type="button" name="Close" value="X" style="width:8%" onclick="winClose();"> <div style="margin-top: 1%;"> <label class="label lblwidth1">&nbsp;</label> <input class="ok-button bttnMod" type="button" name="OK" value="OK" onclick="clickok();" tabindex="1" style="width:50"> <input class="cancel-button bttnMod" type="button" name="Cancel" value="Cancel" tabindex="2" style="width:55" onclick="winClose();"> </div> </div> </div> </div>

Answer 2

这是允许您使 div 可拖动的插件之一。 但是对于不同的背景颜色，我不确定它是否可以使用相同的类名。

 $( function() { $( "#winMod" ).draggable(); });

 .hidModal{ position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.2); z-index: 500; opacity:2; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; } .windowModal { width: 400px; top:15%; position: fixed; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background:rgba(255, 204, 153,0.2); z-index: 501; opacity:0.5; background: -moz-linear-gradient(#ffe6cc, #ffa64d); background: -webkit-linear-gradient(#ffe6cc, #ffa64d); background: -o-linear-gradient(#ffe6cc, #ffa64d); } #winMod{ position: relative; } .windowModal:hover{ opacity: 1.0; } .closeMod { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: 5px; text-align: center; top: 4px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .closeMod:hover { background: #aaaaaa; color: #ff0022; cursor: pointer; } .bttnMod { background: #606061; color: #FFFFFF; line-height: 15px; text-align: center; width: 50px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .bttnMod:hover { background: #00d9ff; cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="hidModal"> <div id="winMod" class="windowModal"> <div style="margin-top: 1%;"> <input class="closeMod" type="button" name="Close" value="X" style="width:8%" onclick="winClose();" > <div style="margin-top: 1%;"> <label class="label lblwidth1">&nbsp;</label> <input class="bttnMod" id="OK" type="button" name="OK" value="OK" onclick="clickok();" tabindex="1" style="width:50"> <input class="bttnMod" id="Cancel" type="button" name="Cancel" value="Cancel" tabindex="2" style="width:55" onclick="winClose();"> </div> </div> </div>

Answer 3

这给出了准确的输出。

 dragElement(document.getElementById("parnt")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id + "header")) { /* if present, the header is where you move the DIV from:*/ document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown; } else { /* otherwise, move the DIV from anywhere inside the DIV:*/ elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { /* stop moving when mouse button is released:*/ document.onmouseup = null; document.onmousemove = null; } }

 .hidModal{ position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.2); z-index: 500; opacity:2; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; } .windowModal { width: 400px; position: relative; margin: 10% auto; border-radius: 10px; background:rgba(255, 204, 153,0.2); z-index: 501; opacity:0.5; background: -moz-linear-gradient(#ffe6cc, #ffa64d); background: -webkit-linear-gradient(#ffe6cc, #ffa64d); background: -o-linear-gradient(#ffe6cc, #ffa64d); } #parnt{ position: absolute; z-index: 10; color: #fff; z-index: 10; top: 40%; bottom: 85%; left: 15%; right: 50%; } .windowModal:hover{ opacity: 1.0; } .closeMod { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: 5px; text-align: center; top: 4px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .closeMod:hover { background: #aaaaaa; color: #ff0022; cursor: pointer; } .bttnMod { background: #606061; color: #FFFFFF; line-height: 15px; text-align: center; width: 50px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .bttnMod:hover { background: #00d9ff; cursor: pointer; }

 <div class="hidModal"> <div id="parnt"> <div id="winMod" class="windowModal"> <div style="margin-top: 1%;"> <input class="closeMod" type="button" name="Close" value="X" style="width:8%" onclick="winClose();" > <div style="margin-top: 1%;"> <label class="label lblwidth1">&nbsp;</label> <input class="bttnMod" type="button" name="OK" value="OK" onclick="clickok();" tabindex="1" style="width:50"> <input class="bttnMod" type="button" name="Cancel" value="Cancel" tabindex="2" style="width:55" onclick="winClose();"> </div> </div> </div> </div>

这按我的预期工作。