Jquery ui jQuery多模态对话框

所以我有一个页面将有多个模式弹出窗口。 每个都有需要通过表单发送回页面的值

确保每个对话框都在我使用的表单中。parent.appendTofrmMain；在每个对话框定义的末尾

当有多个模态被声明时，我的问题就来了。具有行.parent.appendTofrmMain的模态；“最后完成”是唯一一个通过表单返回其值的操作

代码相当多，但希望尽可能多地保留它

另外：我有两个情态动词起作用，第三个不起作用。select和TEXT区域工作，而正常输入不工作。不知道为什么，任何帮助都将不胜感激

我从示例中提取了大部分代码

HTML

---

所以我想出了一种方法，每次都能让多个情态动词起作用

正如您可能知道的那样，模态div被移动到body标记的外部，这就是为什么输入、选择、文本区域不会出现在表单post back中的原因

所以我们需要将div移回表单中，而不是在对话框的声明中这样做，我是在按钮上这样做的

所以代码改为

$("#edit-jde-number-dialog-form").dialog({
    autoOpen: false,
    height: 250,
    width: 350,
    modal: true,
    buttons: {
        'Change JdeNumber': function () {
            var bValid = true;

            jdenumberAllFields.removeClass('ui-state-error');
            var jdeNo = $("#JdeCustomerNumber");

            if (checkNotEmpty(jdeNo) == false) {
                var tips = $(".validatejde");
                updateTips(tips, "You must enter a jde number")
                bValid = false;
            }


            if (bValid) {
                $(this).dialog('close');
                //*******************************************
                $(this).parent().appendTo("#frmMain");  //puts the modal back in the form
                //*******************************************
                SubmitAction('UpdateJDECustomerNumber');
            }


        },
        Cancel: function () {
            $(".validatejde").text("");
            $(this).dialog('close');
        }
    },
    close: function () {
        jdenumberAllFields.val('').removeClass('ui-state-error');
    }
})

---

所以我想出了一种方法，每次都能让多个情态动词起作用

正如您可能知道的那样，模态div被移动到body标记的外部，这就是为什么输入、选择、文本区域不会出现在表单post back中的原因

所以我们需要将div移回表单中，而不是在对话框的声明中这样做，我是在按钮上这样做的

所以代码改为

$("#edit-jde-number-dialog-form").dialog({
    autoOpen: false,
    height: 250,
    width: 350,
    modal: true,
    buttons: {
        'Change JdeNumber': function () {
            var bValid = true;

            jdenumberAllFields.removeClass('ui-state-error');
            var jdeNo = $("#JdeCustomerNumber");

            if (checkNotEmpty(jdeNo) == false) {
                var tips = $(".validatejde");
                updateTips(tips, "You must enter a jde number")
                bValid = false;
            }


            if (bValid) {
                $(this).dialog('close');
                //*******************************************
                $(this).parent().appendTo("#frmMain");  //puts the modal back in the form
                //*******************************************
                SubmitAction('UpdateJDECustomerNumber');
            }


        },
        Cancel: function () {
            $(".validatejde").text("");
            $(this).dialog('close');
        }
    },
    close: function () {
        jdenumberAllFields.val('').removeClass('ui-state-error');
    }
})

---

我有一个类似的问题，但我需要在表单中附加所有模态，但在提交时只附加一个模态。我为每个模态创建了一个单独的div，并将模态附加到相应的div中

<script type="text/javascript">
$(document).ready(function() {
  $("#wdDialog").dialog({
    autoOpen: false,
    buttons: {
      "Back": function() {
        $(this).dialog("close");
      },
      "Continue": function() {
        $(this).dialog("close");
      }
    }
  }).parent().appendTo($("#wd"));

  $("#pdDialog").dialog({
    autoOpen: false,
    buttons: {
      "Back": function() {
        $(this).dialog("close");
      },
      "Continue": function() {
        $(this).dialog("close");
      }
    }
  }).parent().appendTo($("#pd"));

  $("#cdDialog").dialog({
    autoOpen: false,
    buttons: {
      "Back": function() {
        $(this).dialog("close");
      },
      "Continue": function() {
        $(this).dialog("close");
      }
    }
  }).parent().appendTo($("#cd"));
});
</script>
<form id="actionForm">
<div id="wd"></div>
<div id="pd"></div>
<div id="cd"></div>

<div id="wdDialog">
  <input type="text" name="comment" />
</div>

<div id="cdDialog">
  <input type="radio" name="interest"/>
</div>

<div id="pdDialog">
  <input type="text" name="name"/>
  <input type="button"/>
</div>

</form>

---

我有一个类似的问题，但我需要在表单中附加所有模态，但在提交时只附加一个模态。我为每个模态创建了一个单独的div，并将模态附加到相应的div中

<script type="text/javascript">
$(document).ready(function() {
  $("#wdDialog").dialog({
    autoOpen: false,
    buttons: {
      "Back": function() {
        $(this).dialog("close");
      },
      "Continue": function() {
        $(this).dialog("close");
      }
    }
  }).parent().appendTo($("#wd"));

  $("#pdDialog").dialog({
    autoOpen: false,
    buttons: {
      "Back": function() {
        $(this).dialog("close");
      },
      "Continue": function() {
        $(this).dialog("close");
      }
    }
  }).parent().appendTo($("#pd"));

  $("#cdDialog").dialog({
    autoOpen: false,
    buttons: {
      "Back": function() {
        $(this).dialog("close");
      },
      "Continue": function() {
        $(this).dialog("close");
      }
    }
  }).parent().appendTo($("#cd"));
});
</script>
<form id="actionForm">
<div id="wd"></div>
<div id="pd"></div>
<div id="cd"></div>

<div id="wdDialog">
  <input type="text" name="comment" />
</div>

<div id="cdDialog">
  <input type="radio" name="interest"/>
</div>

<div id="pdDialog">
  <input type="text" name="name"/>
  <input type="button"/>
</div>

</form>