Question

我正在使用旧系统，并且我尝试从jQuery 1.7.4升级到3.2.1，因此我似乎需要将colorbox从1.4.0升级到1.6.4 。但是，我遇到了一个与弹出窗口加载到DOM中的问题有关的问题。

我的HTML看起来像这样：

<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="colorbox_v1_6_4\colorbox.css">
  <script src="jquery-3.2.1.js"></script>
  <script src="colorbox_v1_6_4\jquery.colorbox.js"></script>
</head>
<body>
  <form id="myform">           
    <button id='openPopupButton'>Open Popup</button>
    <div style="display: none">
        <div class="myPopupBox">                                    
            <button id="mySubmitButton" type="submit">Submit the form</button>
        </div>
    </div>
  </form>
  <script>
    jQuery(document).ready(function () {
      jQuery("#openPopupButton").click(function (e) {
          // Hook up login as user confirmation dialog
          jQuery.colorbox({ href: jQuery(this).parent().find('.myPopupBox'), inline: true });
          e.preventDefault();
      });

      jQuery('#myform').submit(function(e) {
        alert('It Worked!');
        e.preventDefault();
      })
    });
  </script>
</body>

按下#openPopupButton按钮时，应显示表单。按下#mySubmitButton按钮后，应提交表单，该表单应显示“工作！”字样的提示。

原始系统（使用colorbox 1.4.0）工作正常，但是当我切换到colorbox 1.6.4时它停止工作。这似乎是因为新版本的colorbox在<form>标记之外的DOM中创建了弹出窗口，而旧版本在其中创建了它。

有没有让colorbox在<form>标签内创建表单，从而让提交按钮提交表单？

是否可以在表单标签中打开彩色框？

0 个答案: