JavaScript实现弹出模态窗体并接受传值的方法-前端开发

下面是 JavaScript 实现弹出模态窗体并接受传值的方法的攻略：

下面是 JavaScript 实现弹出模态窗体并接受传值的方法的攻略：

原理分析

在 JavaScript 中，我们可以通过调用 window.open 方法来打开一个新窗口，也可以通过调用 window.showModalDialog 方法来打开模态窗口。其中，模态窗口是一种类似于对话框的窗口方式，可以禁止用户在不关闭窗口的情况下操作父窗口。

在模态窗口中，我们可以调用 window.returnValue 方法来向父窗口传递数据，并在父窗口中通过 window.showModalDialog 方法的返回值来接收数据。

实现步骤

在父窗口中，定义一个打开模态窗口的 JavaScript 函数，该函数接受一个 URL 参数用来指定要打开的窗口地址和大小等参数。

javascript function openModalDialog(url, width, height) { var features = "dialogWidth:" + width + "px;dialogHeight:" + height + "px;"; var result = window.showModalDialog(url, null, features); if (result !== undefined) { // 接收到了来自模态窗口的返回值 alert(result); } }

在模态窗口中，定义一个 JavaScript 函数，该函数实现向父窗口传递数据的逻辑。

javascript function submitForm() { var inputElement = document.getElementById("input-data"); var inputValue = inputElement.value; window.returnValue = inputValue; window.close(); }

在模态窗口中，定义一个 HTML 表单和一个按钮，当用户输入数据后点击按钮，即可调用上述 JavaScript 函数来向父窗口传递数据。

```html

```

在父窗口中，调用上述 JavaScript 函数来打开模态窗口，并在模态窗口中传递参数。

html <button type="button" onclick="openModalDialog('modal.html', 400, 300)">打开模态窗口</button>

示例演示

为了更好地理解上述过程，下面以两个示例来说明 JavaScript 实现弹出模态窗体并接受传值的方法。

示例一：显示模态窗口并在模态窗口中输入文本，传回父窗口并显示

在父窗口中，点击“打开模态窗口”按钮，会弹出一个大小为 400x300 的模态窗口。在模态窗口中输入一段文本并点击“提交”按钮，即可将该文本作为返回值传回父窗口，并在父窗口中显示弹出的模态窗口的返回值。

示例代码：

<!-- 父窗口代码 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>示例一：显示模态窗口并在模态窗口中输入文本，传回父窗口并显示</title>
  </head>
  <body>
    <button type="button" onclick="openModalDialog('modal.html', 400, 300)">打开模态窗口</button>
    <script>
      function openModalDialog(url, width, height) {
        // 打开模态窗口，并接收返回值
        var features = "dialogWidth:" + width + "px;dialogHeight:" + height + "px;";
        var result = window.showModalDialog(url, null, features);
        if (result !== undefined) {
          // 接收到了来自模态窗口的返回值
          document.getElementById("result").textContent = "你输入的值为：" + result;
        }
      }
    </script>
    <div id="result"></div>
  </body>
</html>

<!-- 模态窗口代码 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>示例一：模态窗口</title>
  </head>
  <body>
    <form>
      <input type="text" id="input-data">
      <button type="button" onclick="submitForm()">提交</button>
    </form>
    <script>
      function submitForm() {
        // 将输入框中的值作为返回值传回父窗口
        var inputElement = document.getElementById("input-data");
        var inputValue = inputElement.value;
        window.returnValue = inputValue;
        window.close();
      }
    </script>
  </body>
</html>

示例二：显示模态窗口并在模态窗口中选择颜色，传回父窗口并改变父窗口的背景色

在父窗口中，点击“打开模态窗口”按钮，会弹出一个大小为 400x300 的模态窗口。在模态窗口中选择一种颜色，并点击“提交”按钮，即可将该颜色作为返回值传回父窗口，并在父窗口的背景色中显示该颜色。

示例代码：

<!-- 父窗口代码 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>示例二：显示模态窗口并在模态窗口中选择颜色，传回父窗口并改变父窗口的背景色</title>
    <style>
      body {
        background-color: #ffffff;
      }
    </style>
  </head>
  <body>
    <button type="button" onclick="openModalDialog('modal2.html', 400, 300)">打开模态窗口</button>
    <script>
      function openModalDialog(url, width, height) {
        // 打开模态窗口，并接收返回值
        var features = "dialogWidth:" + width + "px;dialogHeight:" + height + "px;";
        var result = window.showModalDialog(url, null, features);
        if (result !== undefined) {
          // 接收到了来自模态窗口的返回值
          document.body.style.backgroundColor = result;
        }
      }
    </script>
  </body>
</html>

<!-- 模态窗口代码 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>示例二：模态窗口</title>
    <style>
      .color-item {
        width: 50px;
        height: 50px;
        margin: 10px;
        border: 1px solid #333333;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="color-item" style="background-color: #ff0000" onclick="submitForm('#ff0000')"></div>
    <div class="color-item" style="background-color: #00ff00" onclick="submitForm('#00ff00')"></div>
    <div class="color-item" style="background-color: #0000ff" onclick="submitForm('#0000ff')"></div>
    <script>
      function submitForm(color) {
        // 将颜色值作为返回值传回父窗口
        window.returnValue = color;
        window.close();
      }
    </script>
  </body>
</html>