Drag and Drop the whole div container. (Move Pop-up Modal dialog box)

Question

Here I have a Modal pop-up. I want to make the modal draggable. And also I want the "Ok" button to be in green on hover and "cancel" should be in red on hover. I's it possible to do it in single css class?

 .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>

I tried some posible ways. But it didn't work. Those were in jQuery. But I dont have much knowledge in that. So please help me to solve this. Thanks in advance for helping.

Answer 1

For the draggable part, if you're using JQuery there's the Draggable property.

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

You can also specify which part of the modal to assign the property to (in this example, the modal's header).

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

As for the buttons, you can change their background color and add some transition animation with the :hover selector. Though I believe it is best to handle their classes separately as shown below.

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

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

Snippet:

 .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>

---

EDIT:

For a solution without having to include JQuery/JQueryUI (that is, pure Javascript), you can follow the below snippet for reference. Added some comments as it's a considerable amount of extra lines of code compared to the above snippet.

 // 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

This is one of the plugins that allow you to make the div draggable. But for the different background color I'm not sure if it's doable with the same class name.

 $( 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

This gives the exact output.

 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>

This works as I expected.