使弹出模式对话框出现后可移动/可拖动

Question

有人知道我如何制作这个模态弹出表单，可移动/可拖动吗？

理想情况下，我希望它最初“出现”在屏幕的右上角或右下角 - 滑入式动画也很棒 - 但用户随后能够移动/拖动它到另一个位置（取决于屏幕大小/分辨率等，它可能会覆盖父页面上的某些内容）我怀疑现有 CSS 中的某些内容将其“锁定”到位。

（如果有人知道我如何使弹出窗口最初“滑入”而不是简单地出现，则加分 - 目前在函数内使用简单的 display:none / display:block 开关 - 但这不是必需的......）

谢谢！

function openFeedbackForm() {
  document.getElementById("popup-feedback").style.display = "block";
}

function closeFeedbackForm() {
  document.getElementById("popup-feedback").style.display = "none";
}

$(document).ready(function() {
  openFeedbackForm();
});

th {
  padding: 12px;
  margin: 12px;
}

td {
  padding: 12px;
  margin: 12px;
}

.switch-field {
  display: inline;
  margin-bottom: 36px;
  overflow: hidden;
}

.switch-field input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}

.switch-field label {
  background-color: #e4e4e4;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  line-height: 1;
  text-align: center;
  padding: 8px 16px;
  margin-right: -1px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.1s ease-in-out;
  opacity: 0.8;
}

.switch-field label:hover {
  cursor: pointer;
  opacity: 1;
}

.switch-field input:checked+label {
  background-color: #a5dc86;
  box-shadow: none;
}

.switch-field label:first-of-type {
  border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
  border-radius: 0 4px 4px 0;
}

{
  box-sizing: border-box;
}


/* The popup form - hidden by default */

#popup-feedback {
  display: none;
  position: absolute;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

#popup-feedback-header {
  font-size: 16px;
  font-weight: bold;
  font-family: Calibri;
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}


/* Add styles to the form container */

.form-container {
  width: 500px;
  padding: 10px;
  background-color: white;
}


/* Full-width input fields */

.form-container textarea[type=feedbackComments] {
  width: 93%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  font-size: 14px;
  font-family: Calibri;
}


/* When the inputs get focus, do something */

.form-container textarea[type=feedbackComments]:focus {
  background-color: #ddd;
  outline: none;
}


/* Set a style for the submit/login button */

.form-container .btn {
  font-size: 16px;
  font-weight: bold;
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom: 10px;
  opacity: 0.8;
}


/* Add some hover effects to buttons */

.form-container .btn:hover {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<div id="popup-feedback">
  <div id="popup-feedback-header">Please give us your feedback!</div>
  <form action="/action_page.php" class="form-container">
    <table>
      <tr>
        <td>Did this resolve your issue?</td>
        <td>
          <div class="switch-field" name="resolutionFeedback">
            <input type="radio" id="radio-helpful-yes" name="switch-helpful" value="yes">
            <label for="radio-helpful-yes">Yes</label>
            <input type="radio" id="radio-helpful-no" name="switch-helpful" value="no">
            <label for="radio-helpful-no">No</label>
          </div>
        </td>
      </tr>
      <tr>
        <td>Were the instructions easy to understand & follow?</td>
        <td>
          <div class="switch-field" name="userFriendlyFeedback">
            <input type="radio" id="radio-easy-yes" name="switch-easy" value="yes">
            <label for="radio-easy-yes">Yes</label>
            <input type="radio" id="radio-easy-no" name="switch-easy" value="no">
            <label for="radio-easy-no">No</label>
          </div>
        </td>
      </tr>
    </table>
    <textarea type="feedbackComments" name="comments" placeholder="Please include any comments here"></textarea>
    <br>
    <button type="submit" class="btn">Submit Feedback</button>
  </form>
</div>

Answer 1

这是我的可拖动弹出窗口：

//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv"));

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

#mydiv {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
}

#mydivheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}

<h1>Draggable DIV Element</h1>

<p>Click and hold the mouse button down while moving the DIV element</p>

<div id="mydiv">
  <div id="mydivheader">Click here to</div>
  <p>Move</p>
  <p>this</p>
  <p>DIV</p>
</div>

我修改了你的代码并做了这个。我知道它有点坏，我是 HTML 和 javascript 编码的新手。我从头开始制作了一个样式表 (https://scratch.mit.edu)。部分代码来自 w3schools (https://www.w3schools.com/)

//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv"));

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

body,
#content {
padding-bottom: 31px;
}                               
#footer {
position: fixed;
top: initial;
bottom: 0;
width: 100%;
border-top: 1px solid #d9d9d9;
height: 32px;
padding: 0;
z-index: 20;
transition-duration: 0.5s;
}
#footer .container {        
padding-top: 20px;  
}           
#footer:hover {     
height: var(--footer-hover-height);     
}                       
.page > #view {             
margin-bottom: 0;       
}                       
:root {         
--footer-hover-height: 300px;       
}           
mark {      
background-color: transparent;      
color: black;           
}       

#mydiv {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
}

#mydivheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}

th {
  padding: 12px;
  margin: 12px;
}

td {
  padding: 12px;
  margin: 12px;
}

.switch-field {
  display: inline;
  margin-bottom: 36px;
  overflow: hidden;
}

.switch-field input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}

.switch-field label {
  background-color: #e4e4e4;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  line-height: 1;
  text-align: center;
  padding: 8px 16px;
  margin-right: -1px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.1s ease-in-out;
  opacity: 0.8;
}

.switch-field label:hover {
  cursor: pointer;
  opacity: 1;
}

.switch-field input:checked+label {
  background-color: #a5dc86;
  box-shadow: none;
}

.switch-field label:first-of-type {
  border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
  border-radius: 0 4px 4px 0;
}

{
  box-sizing: border-box;
}


/* The popup form - hidden by default */

#popup-feedback {
  display: none;
  position: absolute;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

#popup-feedback-header {
  font-size: 16px;
  font-weight: bold;
  font-family: Calibri;
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}


/* Add styles to the form container */

.form-container {
  width: 500px;
  padding: 10px;
  background-color: white;
}


/* Full-width input fields */

.form-container textarea[type=feedbackComments] {
  width: 93%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  font-size: 14px;
  font-family: Calibri;
}


/* When the inputs get focus, do something */

.form-container textarea[type=feedbackComments]:focus {
  background-color: #ddd;
  outline: none;
}


/* Set a style for the submit/login button */

.form-container .btn {
  font-size: 16px;
  font-weight: bold;
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom: 10px;
  opacity: 0.8;
}


/* Add some hover effects to buttons */

.form-container .btn:hover {
  opacity: 1;
}

<link rel="stylesheet" href="https://scratch.mit.edu/common.css">
<link rel="stylesheet" href="https://scratch.mit.edu/css/lib/normalize.min.css">
<link rel="stylesheet" href="https://scratch.mit.edu/splash.css">
<body>
<div id="footer">
<div id="container">
<div id="mydiv">
  <div id="mydivheader">Please give us your feedback!</div>
  <form action="/action_page.php" class="form-container">
    <table>
      <tr>
        <td>Did this resolve your issue?</td>
        <td>
          <div class="switch-field" name="resolutionFeedback">
            <input type="radio" id="radio-helpful-yes" name="switch-helpful" value="yes">
            <label for="radio-helpful-yes">Yes</label>
            <input type="radio" id="radio-helpful-no" name="switch-helpful" value="no">
            <label for="radio-helpful-no">No</label>
          </div>
        </td>
      </tr>
      <tr>
        <td>Were the instructions easy to understand & follow?</td>
        <td>
          <div class="switch-field" name="userFriendlyFeedback">
            <input type="radio" id="radio-easy-yes" name="switch-easy" value="yes">
            <label for="radio-easy-yes">Yes</label>
            <input type="radio" id="radio-easy-no" name="switch-easy" value="no">
            <label for="radio-easy-no">No</label>
          </div>
        </td>
      </tr>
    </table>
    <textarea type="feedbackComments" name="comments" placeholder="Please include any comments here"></textarea>
    <br>
    <button type="submit" class="btn">Submit Feedback</button>
  </form>
</div>
</div>
</div>