Javascript 当使用vanilla JS的按钮触发时，如何触发模式在显示和隐藏之间切换？

背景：

我在测试脚本中遇到了一个未定义的错误，并且对显示/隐藏状态需要定义什么才能正常工作感到困惑。我打算对叠加和模态本身的显示/隐藏状态使用

.toggle

，但发现交互与我们试图操纵的模态的功能不完全相同。因此，加入

jQuery脚本：根据最新帖子更新

jQuery（#hero_content”）.append（'Get a Quote'）；
$（文档）.ready（函数（）{
$（“#获取报价”）。在（'click'，函数（e）{
$（“.w_lightbox-veil”）.show（）；
$（“#lightbox_shell”）.show（）；
});
$（'w_lightbox-veil'）。在（'click'，函数（e）上{
$（.w_lightbox-veil”）.hide（）；
$（“#lightbox_shell”）.hide（）；
});
$（'.close'）。在（'click'，函数（e）上{
$（.w_lightbox-veil”）.hide（）；
$（“#lightbox_shell”）.hide（）；
});
});

来自客户网站的HTML代码片段：

<!-- Hero Content -->
<div id="hero_content" class="parallax" data-position="#hero_content" data-offsetmin="0" data-offsetmax="-100" style="transform: translateY(0px);">               
  <h1 class="display1">We<br class="desktop_only"> want you on<br class="desktop_only"> the team.</h1>
  <p>With us, you and your family get an extra line of defense against bills that health insurance doesn't cover. Just ask John Doe, our newest recruiter.</p>
  <a href="#" class="spacebutton" onclick="commercial()" aria-describedby="video_cta" role="button" style="">
    <button id="get-quote" class="bluebg whitetext contact-trigger contact-button" role="button" title="Get a Quote" aria-label="Get a Quote opens a dialog" tabindex="14">Get a Quote</button>
  </a>
</div>

<!-- Overlay and Modal -->
<div class="w_lightbox-veil" data-cached-aria-hidden="" aria-hidden="true"></div>

<div id="lightbox_shell"><div class="test-w_contact-lightbox-individuals">
    <div class="form-main-bg">
      <div class="close-bg"><button type="button" class="close">close</button></div>
      <div class="sidebar-bg">
        <div class="info-section">
          <div class="top">
            <h6>Request a Quote</h6>
            <p>We're an insurance that pays cash benefits, to help pay for things that major medical may not cover.</p>
          </div>
          <div class="middle">
            Fill out our <strong>Contact Form</strong> and we'll call you <em>or</em> Call Us now at <a href="tel:855-782-5850" style="display: block;">855-782-5850</a>
          </div><a class="manage-account" href="#" target="_blank">Manage My Policy</a>
        </div>
      </div>
      <div class="form-bg">
        <div class="legend">
          Provide your information so an agent can reach you.
        </div>
        <form method="post">
          <input name="offering" type="hidden" value="Individual">
          <input name="language" type="hidden" value="English">
          <div class="contact-fields">
            <div class="flex_columns">
              <div class="flex_2col">
                <span class="input-text firstname" data-manual="1"><input name="firstname" title="First Name" class="required" id="firstname" type="text" maxlength="150" placeholder="First Name *"></span>
              </div>
              <div class="flex_2col">
                <span class="input-text lastname" data-manual="1"><input name="lastname" title="Last Name" class="required" id="lastname" type="text" maxlength="150" placeholder="Last Name *"></span>
              </div>
              <div class="clearfloat"></div>
            </div>
            <div class="flex_columns">
              <div class="flex_2col">
                <span class="input-text phone" data-manual="1"><input name="phone" title="Phone Number" class="required" id="phone" type="tel" maxlength="12" placeholder="Phone Number *"></span>
              </div>
              <div class="flex_2col">
                <span class="input-text zipcode" data-manual="1"><input name="zipcode" title="Zip Code" class="required" id="zipcode" type="tel" maxlength="5" placeholder="Zip Code *"></span>
              </div>
              <div class="clearfloat"></div>
            </div>
            <div class="flex_columns">
              <div class="flex_2col">
                <span class="input-text email" data-manual="1"><input name="email" title="Email" class="required" id="email" type="email" maxlength="255" placeholder="Email *"></span>
              </div>
              <div class="flex_2col">
                <div class="requirement-info">
                  * fields are required
                </div>
                <ul class="misc">
                  <li>
                    <p>Would you like an agent to call asap?</p><label class="checkbox"><input name="yesmeet" type="checkbox"> Yes</label> <label class="checkbox"><input name="nomeet" type="checkbox"> No</label>
                  </li>
                </ul>
              </div>
              <div class="clearfloat"></div>
            </div>
          </div>
          <div class="form_progress"></div>
          <div class="contact-time-selection" style="display: none;">
              <div class="tabs">
                  <div class="flex_columns">
                      <div class="tab">
                          <input class="now-date" name="date" type="hidden"> 
                          <input class="now-time" name="time" type="hidden"> 
                          <input class="now-contact-me-type" name="contactMeType" type="hidden">
                          <div class="eta">
                              Press submit for an agent to call you <span class="value">within 15 minutes</span>
                          </div>
                      </div>
                      <div class="tab">
                          <div class="divider-container">
                              <div class="divider"></div>
                              <div class="divider-text">
                                  or
                              </div>
                              <div class="divider" style="right: 0%;"></div>
                          </div>
                          <input class="now-contact-me-type" name="contactMeType" type="hidden">
                          <p class="later-info">If you need to schedule another time for a call, <span>select a date and time that works with
                                  your schedule below:</span></p>
                          <div class="dropdown-row">
                              <div class="dropdown-box date-dropdown" data-manual="1" data-scroll-threshold="4">
                                  <div class="dropdown-title">
                                      <p>Select a Day</p>
                                  </div><select name="date">
                                  </select>
                              </div>
                              <div class="time-dropdown-box time-dropdown" data-manual="1">
                                  <div class="dropdown-title">
                                      <p>Select Time</p>
                                  </div><select name="time">
                                  </select>
                              </div>
                          </div><a href="#" class="clear-date-time textlink">Reset Date &amp; Time Selection</a>
                      </div>
                  </div>
              </div>
          </div>
          <div class="flex_columns" style=" /* display: none; */">
            <input class="textbutton is-blue submit" type="submit" value="Submit">
            <div class="clearfloat"></div>
          </div>
          <p style="font-size: 13px;line-height: 100%;margin: 15px 0 14px;">By hitting submit, I agree to receive autodialed calls, to include scheduling reminders, and texts from our company.</p>
        </form>
      </div>
      <div class="clearfloat"></div>
    </div>
  </div>
</div>

我们希望您加入团队。
有了我们，你和你的家人就可以获得额外的一道防线来抵御医疗保险无法覆盖的账单。问问约翰·多伊，我们最新的招聘人员

关闭
请求报价
我们是一家支付现金福利的保险公司，帮助支付主要医疗保险可能无法覆盖的费用

填写我们的联系表，我们会立即给您打电话或拨打
提供您的信息，以便代理可以联系到您。
*字段是必需的


您希望代理尽快打电话给您吗？
是否


按submit可让代理在15分钟内给您打电话
或
如果您需要安排另一个通话时间，请选择一个适合您的日期和时间
您的日程安排如下：
选择一天

选择时间

点击提交，我同意接收自动拨号电话，包括日程安排提醒和公司发来的短信

append正在正确启动并创建按钮，但是if语句没有正常运行，感觉卡住了。我们试图让覆盖（.w#lightbox-veil）和模式（#lightbox_shell）在单击“附加创建”按钮时显示，并在单击关闭图标（.close）或覆盖时消失。感觉上面的代码片段背后的逻辑是合理的，但不确定为什么它没有按预期的方式启动

1月16日更新：

找到了原始的脚本片段，该脚本片段引入了模态和覆盖部分的功能。粘贴此处以获取文档

<script>
    $(document).ready(function () {

        require(['/_Global-Assets/js/common.js'], function (common) {
            require.config({
                baseUrl: '/_Global-Assets/js/',
                waitSeconds: 0
            });

            if (window.location.hash == "#surgery") {
                if ($("#surgery").length > 0) {
                    requirejs(['lib/common_components/LightboxModal', 'site'],
                        function (LightboxModal, site) {
                            (function() {
                                videoLightbox = new LightboxModal({
                                    el: $('#surgery')
                                });
                                $("#surgery" + '.tool_hide.hide-modal').on("click", function() {
                                    videoLightbox.hide(); 
                                });
                            })();
                        }
                    );
                }
            }
        });
    });
</script>

$（文档）.ready（函数（）{
require（['/_Global-Assets/js/common.js']），函数（common）{
require.config({
baseUrl:“/_Global-Assets/js/”，
等待秒：0
});
if（window.location.hash==“#手术”）{
如果（$（“#手术”）。长度>0）{
requirejs（['lib/common_components/LightboxModal'，'site']，
功能（LightboxModal，站点）{
（功能（）{
videoLightbox=新LightboxModal({
el:$（“外科手术”）
});
$（“#外科”+”.tool_hide.hide model'）。打开（“单击”，函数（）{
videoLightbox.hide（）；
});
})();
}
);
}
}
});
});

---

任何指导都将不胜感激！：）

您将事件绑定调用粘贴在

if

语句中。为什么？自从我经常使用jQuery/JavaScript以来，已经有好几年的时间了，我是一个自学成才的程序员，一直在努力理解我的错误之处。

<script>
    $(document).ready(function () {

        require(['/_Global-Assets/js/common.js'], function (common) {
            require.config({
                baseUrl: '/_Global-Assets/js/',
                waitSeconds: 0
            });

            if (window.location.hash == "#surgery") {
                if ($("#surgery").length > 0) {
                    requirejs(['lib/common_components/LightboxModal', 'site'],
                        function (LightboxModal, site) {
                            (function() {
                                videoLightbox = new LightboxModal({
                                    el: $('#surgery')
                                });
                                $("#surgery" + '.tool_hide.hide-modal').on("click", function() {
                                    videoLightbox.hide(); 
                                });
                            })();
                        }
                    );
                }
            }
        });
    });
</script>