Rearrange the entire div container by simply dragging and dropping it. (Shift the Pop-up Modal dialog box)

How can I make a Modal pop-up draggable and change the color of the "Ok" and "Cancel" buttons on hover using a 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 have attempted different solutions using jQuery, but without success due to my limited knowledge in that area. Any assistance in solving this issue would be greatly appreciated. Thank you in advance.

javascriptjqueryhtmlcssdrag-and-drop

Answer №1

When it comes to making an element draggable, JQuery provides a convenient solution through the Draggable property.

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

If you want to specify a specific section of the modal to be draggable (like the header), you can do so with the following code:

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

For customizing button styles, including changing background colors and adding transitions on hover, you can target them individually using CSS classes:

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

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

A code snippet demonstrating the modal layout and styles:

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

/* Additional CSS code for modal window appearance */

<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"><!-- Modal content --></div>
<script>
    $("#your-modal").draggable(); 
</script>

EDIT:

If you prefer a pure JavaScript approach without relying on JQuery/JQueryUI, you can achieve the same draggable functionality by following this code snippet:

// JavaScript code for making an element draggable without JQuery

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

/* Additional CSS code for modal window appearance */

<div id="your-modal" class="hidModal"><!-- Modal content --></div>

Answer №2

This plugin allows you to easily make a div element draggable on a webpage. However, it may be tricky to change the background color using 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 code snippet provides the desired output.

dragElement(document.getElementById("parnt"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if the header is present, it allows moving the DIV:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* if not, move the DIV from anywhere in the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the initial mouse cursor position:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // track the cursor movement:
    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;
    // update the element's 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 solution meets my expectations.

Answer №4

This is a demonstration of basic JavaScript functionality. Move the header to reposition the popup within its parent container.

var offset = [0, 0];
var isDown = false;

var headerElement = document.getElementById("#PopupHeader");
var popupElement = document.getElementById("#PopupMainDiv");
if (headerElement && popupElement) {

  // MouseDown event callback
  var mouseDown = function(event) {
    event.stopPropagation();
    event.preventDefault();
    isDown = true;
    if (popupElement) {
      popupElement.addEventListener("mousemove", mouseMove);
      popupElement.addEventListener("mouseup", mouseUp);
      offset = [
        event.clientX,
        event.clientY
      ];
    }
  }

  // MouseUp event callback
  var mouseUp = function() {
    isDown = false;
    if (popupElement) {
      popupElement.removeEventListener("mousemove", mouseMove);
      popupElement.removeEventListener("mouseup", mouseUp);
    }
  }

  // MouseMove event callback
  var mouseMove = function(event) {
    if (isDown) {
      if (popupElement.parentElement) {
        let newX = offset[0] - event.clientX;
        let newY = offset[1] - event.clientY;
        const rect = popupElement.getBoundingClientRect();
        const boundaries = 
        popupElement.parentElement.getBoundingClientRect();
        const x = Math.min(
            Math.max(boundaries.left, rect.left - newX), 
            boundaries.right - rect.width
          ),
          y = Math.min(
            Math.max(boundaries.top, rect.top - newY), 
            boundaries.bottom - rect.height
          );
        popupElement.style.left = `${x}px`;
        popupElement.style.top = `${y}px`;
        offset = [
          event.clientX,
          event.clientY
        ];
      }
    }
  }
  headerElement.addEventListener('mousedown', mouseDown);
}
.PopupLayered {
  background-color: rgba(40,40,40,0.7);
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  display:flex;
  justify-content:center;
  align-items:center
}

.PopupMainDiv {
  position: absolute;
  overflow: hidden;
  border: 2px solid #dddddd;
  border-radius: 5px;
  width: 400px;
  height: 200px;
  background-color: grey;
  color:white;
}

.PopupHeader {
  background-color: lightgray;
  color: #333333;
  font-weight: bold;
  position: relative;
  height: 25px;
  cursor: move;
  color: black;
}

/* Popup title span */
.PopupHeader span {
  width: 90%;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0.3em 0.3em;
}

/* Popup close button */
.PopupHeader button {
  color: white;
  background-color: #cc0000;
  border: none;
  border-radius: 2px;
  position: relative;
  float: right;
  white-space: nowrap;
  overflow: hidden;
  width: 20px;
  margin: 0.1em 0.2em;
  height: 20px;
}

  /* Popup close button hover */
.PopupHeader button:hover {
  background-color: red;
  cursor: pointer;
}

.Popup {
  position: absolute;
  background-color: gray;
  width:400px;
  height: 200px;
  text-align: center;
}
<div id="#PopupLayered" class="PopupLayered">
  <div id="#PopupMainDiv" class="PopupMainDiv">
    <div id="#PopupHeader" class="PopupHeader">
      <span>Click and drag the header!</span>
      <button type="button">x</button>
    </div>
    <div id="#Popup" class="Popup">
        <img src="http://www.alleycat.org/wp-content/uploads/2019/03/FELV-cat.jpg" width="450"/>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Graph is vanishing while linked

A unique HTML canvas is included in a standalone file called dashboard.html. To display the dashboard on the main homepage (home.html), we utilize ng-view nested within an ng-if directive. Oddly, clicking on the hyperlink "#" from the home page causes th ...

javascripthtmlcssangularjschart.js

How can I duplicate an array of objects in javascript?

I'm struggling with a javascript issue that may be due to my lack of experience in the language, but I haven't been able to find a solution yet. The problem is that I need to create a copy array of an array of objects, modify the data in the cop ...

javascriptarraysobjectjavascript-objectsarrayobject

Learn how to mock asynchronous calls in JavaScript unit testing using Jest

I recently transitioned from Java to TypeScript and am trying to find the equivalent of java junit(Mockito) in TypeScript. In junit, we can define the behavior of dependencies and return responses based on test case demands. Is there a similar way to do t ...

javascriptunit-testingtypescriptjestjs

Is there a reason why I need to rename the CSS file in order for it to function properly?

I recently completed editing the css file and saved it, but unfortunately, my css file isn't functioning properly. The display remains unchanged and the css files are not being loaded. However, when I decided to rename the css file, everything started ...

htmlcssbootstrap-4

powerful enhancer separates the heading into a layout

I have an HTML div element that just isn't behaving right when I resize the screen. The title pretty much sums it up: <div class='serveMessage'><strong>Fun fact:</strong>&nbsp;over 1,259,468 American students fail ev ...

htmlcss

Maintaining the image's aspect ratio using the Next Image component

Currently, I am using Next's Image component to display a logo. Although the image itself is 1843x550 px, I have specified the width and height properties to adjust it to fit within a space of 83x24 px. However, due to a slightly different aspect rati ...

htmlcssreactjsimagenext.js

What is the most efficient way to include tags using a comma as a separator using the jQuery procedure

When using JSON to return an array of tags with the structure : 'FOOTBALL','BASKET','TENNIS' The goal is to create a tag list with quotes around each tag and a comma as a separator. To achieve this, the following function ca ...

jqueryjsonajaxleaflet

Mixing pipe operators with Angular Observables in an array

In my project, I have an interesting scenario where I am using Observables and piping them to multiple functions as shown below. getOrders(filters: any, page: any = 1, orderBy: string = 'deliver_on', sort: string = 'asc') { const op ...

javascriptangularrxjsobservable

Function that returns an array

Hey there, wondering about variable scope in closures! I've come across a lot of questions on this topic but haven't found the solution to my issue. Here's the code snippet: var teams = []; var players = []; var getRoles = function(roleL ...

javascriptnode.jsclosures

Executing AJAX calls within a forEach loop

I'm facing a challenge with a function that carries out a foreach loop on a list of views and needs to make an AJAX request for each view within the loop. Upon receiving the results in the success callback, it checks if a specific ID is returned and, ...

javascriptjqueryautodesk-forgeautodesk-viewer

Having difficulty identifying duplicate sentences in Vue.js when highlighting them

I am looking for a way to identify and highlight repetitive sentences within a text area input paragraph. I attempted the following code, but unfortunately, it did not produce the desired result. highlightRepeatedText(str) { // Split the string into an ...

javascriptvue.jshighlight

Checkbox in Bootstrap should be displayed before the submit button on smaller screens

I've been searching for a solution to this issue without any luck. In my setup, there are three input fields and a submit button displayed side by side on large screens, enclosed in <div class="col-sm"> to stack vertically on mobile devices. Ho ...

cssbootstrap-4

Attempting to engage with the like button on a Facebook page through Python's Selenium seems to be problematic

Here is the code for adding a (Facebook page like button): WebDriverWait(driver, 30).until(EC.presence_of_element_located((By.XPATH, '/html/body/div[1]/div/div[4]/div/div[1]/div/div[1]/div[2]/div[2]/div/div/div[3]/div/div[1]'))).click() The clic ...

javascriptpythonfacebookseleniumautomation

I am currently focusing on using websockets in combination with JavaScript and Golang servers to efficiently transmit files and

When front-end JavaScript websockets send a JSON object, it looks something like this: message_type: "1" to: "umesh" from: "moin" body: "" file: "{"filename":"reportesmtp.pdf" ,"fileextension":"application/pdf" ,"filesize":61813 ,"filedata ...

javascriptjsongowebsocketsocket.io

Grails array using jQuery autocomplete with findByAll() function

Hello everyone, I appreciate the assistance in advance! I am currently attempting to utilize Grails findByAll() in order to retrieve a list for use in the jQuery autocomplete feature found at this link: https://jqueryui.com/autocomplete/ I believe I am cl ...

javascriptjquerygrails

Table placement within a cell of a table

Seeking assistance with an issue I encountered, where the date of 12th March is combined with a table. Any suggestions on how to separate them? Screenshot: UPDATE:JFIDDLE ...

htmlcss

Calculate the product of a JavaScript variable and a PHP variable, then show the result on the

I need to calculate the product of a PHP variable value and a JavaScript variable, then show the result on the screen. Here is my PHP code: <?php require 'config.php'; session_start(); ?> <html> <head> < ...

javascriptphpjqueryhtmlajax

Retrieve identical values from an array and display them using Vue.js

I am working with a product array that includes id, name, and category data for 5 products. For example, let's say there are 3 products assigned to the mobile category and 2 products assigned to the computer category. What is the best approach to rend ...

javascriptreactjsvue.jsvuejs2vuetify.js

Using JavaScript, display JSON data retrieved from a PHP file

Currently, I am in the process of developing a web application that displays tweets based on a city inputted by the user through an HTML form. The city value is stored in the $_SESSION['city'] variable after the form is submitted. Subsequently, ...

javascriptphpjqueryjsontwitter

Trigger a JavaScript function on a body click, specifically targeting certain elements to be excluded

I have a dropdown menu within a div element. I've created a javascript function called HideDropdown() that hides the menu when any main link on the page is clicked, except for links within the dropdown menu itself: <script> function HideDropdow ...

javascriptjquery