pts/modules/ask/_ask_widget_form2.html.erb

<div class="popup" style="background-color:#07519c; color:#ffffff; display:inline-block; padding:8px 14px; border-radius:4px;">
<i class="fa fa-envelope" style="color:#ffffff;"></i><a href="/zh_tw/about/appeal/case" style="color:#ffffff; text-decoration:none;" title="線上檢舉(在本視窗開啟)" aria-label="線上檢舉"> 線上檢舉</a>
</div>

<!-- Popup 遮罩 + 視窗 -->
<div class="ask2-overlay" id="ask2-overlay" role="dialog" aria-modal="true" aria-label="線上檢舉表單">
  <div class="ask2-modal">
    <button class="ask2-close" id="ask2-close" title="關閉" aria-label="關閉">×</button>
    <div class="widget-ask widget-ask2 widget2">

      <link href="/assets/custom_field.css" media="screen" rel="stylesheet">
      <script src="/assets/validator"></script>
      <link href="/assets/ask/ask.css" media="screen" rel="stylesheet">
      <h3 class="widget-title">
        <span>{{widget-title}}</span>
      </h3>
      <div id="new-ask-question" class="ask-question">
        {{switch_form}}
      </div>
      <script type='text/javascript'>
        $('.ask-question .required').each(function() {
          var text = $(this).text()
          if (text[0]!='*'){
            $(this).text('*' + text);
          }
        });
        $(function(){
          var fv = new FormValidator($("#new_ask_question"));
          fv.validate_functions.check_email = function(value){
            reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9])+$/;
            if (reg.test(value)) {
              return true;
            }else{
              return false;
            }
          }
        })
        $(document).ready(function(){
          function scrollIntoView(selector, offset = 0) {
            window.scroll(0, document.querySelector(selector).offsetTop - offset);
          }
          var email_regex = "{{email_regex}}";
          if(email_regex.length != 0){
            email_regex = new RegExp(email_regex);
            var submit_flag = false;
            $(".ask-question-form").each(function(i, form){
              var $form = $(form);
              var email_field = $form.find('#ask_question_mail');
              if($form.length != 0 && email_field.length != 0){
                $form.submit(function(){
                  if(!submit_flag){
                    submit_flag = true;
                    if(email_regex.test(email_field.val())){
                      submit_flag = false;
                    }else{
                      email_field.css("border", "2px solid red");
                      scrollIntoView('#ask_question_mail');
                      alert("<%=t('ask.please_check_email_format')%>");
                      email_field.one("input",function(){
                        email_field.css("border", "");
                      })
                      submit_flag = false;
                      return false;
                    }
                  }
                })
              }
            })
          }
        })
      </script>
    </div>
  </div>
</div>

<style type="text/css">

  /* ===== Popup 遮罩 ===== */
  .ask2-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    padding: 2rem 1rem;
    box-sizing: border-box;
  }

  .ask2-overlay.is-open {
    display: flex;
  }

  /* ===== Popup 內容視窗 ===== */
  .ask2-modal {
    position: relative;
    background: #ffffff;
    border-radius: 8px;
    width: 100%;
    max-width: 800px;
    padding: 2rem 2.5rem;
    box-sizing: border-box;
    margin: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  }

  /* ===== 叉叉關閉按鈕 ===== */
  .ask2-close {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    color: #555;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
  }

  .ask2-close:hover {
    color: #07519c;
    background: #f0f4fa;
  }

  /* ===== 原有表單樣式完整保留 ===== */
  #new-ask-question .form-horizontal .control-group > *{
    font-size: 1.125em;
  }
  .default_picker label{
    display: none;
  }
  .ask-question .control-group{
    flex-wrap: wrap;
    display: flex;
    width: 100%;
    align-items: flex-start;
  }
  .ask-question .controls > *{
    display: block;
  }
  .ask-question .controls > script{
    display: none;
  }
  .ask-question .form-horizontal .control-label{
    width: 24%;
    max-width: 15em;
    min-width: 7em;
    padding: 0;
    text-align: center;
  }
  .ask-question .form-horizontal .control-group .controls{
    margin: 0;
    display: inline-flex;
    align-items: flex-start;
    overflow: hidden;
    position: relative;
    min-width: 10em;
    max-width: 25em;
    padding-left: 0;
    width: 100%;
    padding: 0.5em;
    justify-content: flex-start;
  }
  .ask-question .form-horizontal input[type="text"],.ask-question  .form-horizontal select{
    width: 97%;
  }
  .ask-question .form-horizontal input[type="text"].hasDatepicker{
    width: auto;
  }
  .ask-question .form-horizontal .form-actions{
    position: relative;
    padding: 1em 0 0 0;
    text-align: center;
  }
  .ask-question .controls > input[type="radio"]:not(:first-child) {
    margin-left: 0.5em;
  }

  /* ===== RWD ===== */
  @media (max-width: 600px) {
    .ask2-modal {
      padding: 1.5rem 1rem;
    }
  }
</style>

<script type="text/javascript">
  $(document).ready(function() {

    // 點擊 .popup 開啟 modal
    $('.popup').on('click', function(e) {
      e.preventDefault();
      $('#ask2-overlay').addClass('is-open');
      $('body').css('overflow', 'hidden');
    });

    // 點擊叉叉關閉
    $('#ask2-close').on('click', function() {
      $('#ask2-overlay').removeClass('is-open');
      $('body').css('overflow', '');
    });

    // 點擊半透明背景關閉（點到 .ask2-modal 內部不關閉）
    $('#ask2-overlay').on('click', function(e) {
      if (!$(e.target).closest('.ask2-modal').length) {
        $('#ask2-overlay').removeClass('is-open');
        $('body').css('overflow', '');
      }
    });

    // ESC 鍵關閉
    $(document).on('keydown', function(e) {
      if (e.key === 'Escape') {
        $('#ask2-overlay').removeClass('is-open');
        $('body').css('overflow', '');
      }
    });

  });
</script>