ms newsletter popup

<div class="nl_wrapper">
  <p id="nl_message" style="display:none;">Inserisci l'indirizzo email</p>
  <div class="d-flex">
    <input class="form-control subscribe-form-input email ms_ff_din" type="email" value="" name="nl_email" placeholder="esempio@esempio.com">
    <div class="sbs_btn">
      <input id="mc-embedded-subscribe newsletter-btn" class="button ms_ff_din" type="submit" name="subscribe" value="Iscriviti" id="Subscribe">
    </div>
  </div>
  <div class="newsletter_privacy_wrapper ms_ff_din_small">
    <p>Cliccando su Iscriviti, presti il tuo consenso a ricevere comunicazioni promozionali,
novità e aggiornamenti dalla Community via e-mail o SMS
come meglio indicato nella Privacy Policy</p>
  </div>
</div>
{% render 'ms_newsletter-popup' %}

<script>
  $(document).ready(function(){
    var fakeBtn = $('.nl_wrapper .button');
    var fakeInput = $('.nl_wrapper input[type="email"]');
    var msg = $('.nl_wrapper #nl_message');
    fakeBtn.on('click', function(e){
      e.preventDefault();
      if(fakeInput.val() == ''){
        msg.show();
        return;
      }
      $('#prompt-background2').show();
      $('#prompt-background2 #mce-EMAIL').val(fakeInput.val());
    })
  })
</script>





<div id="prompt-background2" style="display:none;">
  <div id="newsletter-prompt" class="modal-prompt">
    <div class="outer d-flex">
      <div class="col-5 left">
        <div class="img">
          <img src="https://cdn.shopify.com/s/files/1/0687/1783/8555/files/unnamed.png?v=1708944215">
        </div>
      </div>
      <div class="col-md-7 col-12 right">
        <div id="mc_embed_shell">
   
          <div id="mc_embed_signup">
              <form action="https://drinkboem.us21.list-manage.com/subscribe/post?u=9bc7d4e8febe5cce9ee0a9032&amp;id=4e679c56f0&amp;f_id=00f6f4e6f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_self" novalidate="">
                  <div id="mc_embed_signup_scroll"><h2>Iscriviti</h2>
                      <div class="indicates-required"><span class="asterisk">*</span> campo obbligatorio </div>
                      <div class="">
                        <div class="mc-field-group"><label for="mce-EMAIL">Indirizzo email <span class="asterisk">*</span></label>
                          <input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value=""></div>
                        <div class="mc-field-group"><label for="mce-FNAME">Nome </label><input type="text" name="FNAME" class=" text" id="mce-FNAME" value=""></div>
                      </div>
                      <div class="">
                        <div class="mc-field-group"><label for="mce-LNAME">Cognome </label><input type="text" name="LNAME" class=" text" id="mce-LNAME" value=""></div>
                        <div class="mc-field-group"><label for="mce-MMERGE6">Sesso </label><select name="MMERGE6" class="" id="mce-MMERGE6"><option value=""></option><option value="--- Seleziona ---">--- Seleziona ---</option><option value="M">M</option><option value="F">F</option></select></div>
                      </div>
                      
                        <div class="mc-field-group size1of2"><label for="mce-BIRTHDAY-month">Compleanno </label><div class="datefield d-flex"><span class="subfield monthfield"><input class="birthday REQ_CSS" type="text" pattern="[0-9]*" placeholder="MM" size="2" maxlength="2" name="BIRTHDAY[month]" id="mce-BIRTHDAY-month" value=""></span> <span class="subfield dayfield"><input class="birthday REQ_CSS" type="text" pattern="[0-9]*" placeholder="DD" size="2" maxlength="2" name="BIRTHDAY[day]" id="mce-BIRTHDAY-day" value=""></span>{% comment %}<span class="small-meta nowrap">( mm / dd )</span>{% endcomment %}</div></div>
                        <div class="mc-field-group"><label for="mce-PHONE">Numero di telefono </label><input type="text" name="PHONE" class="REQ_CSS" id="mce-PHONE" value=""></div>
                      
                      <div class="mc-field-group"><label for="mce-MMERGE3">CAP </label><input type="number" name="MMERGE3" class=" number" id="mce-MMERGE3" value=""></div>
                  <div id="mce-responses" class="clear foot">
                      <div class="response" id="mce-error-response" style="display: none;"></div>
                      <div class="response" id="mce-success-response" style="display: none;"></div>
                  </div>
              <div aria-hidden="true" style="position: absolute; left: -5000px;">
                  /* real people should not fill this in and expect good things - do not remove this or risk form bot signups */
                  <input type="text" name="b_9bc7d4e8febe5cce9ee0a9032_4e679c56f0" tabindex="-1" value="">
              </div>
                  <div class="optionalParent">
                      <div class="clear foot">
                          <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button" value="Iscriviti">
                          
                      </div>
                  </div>
              </div>
              </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function(){
    $('#test.template-page .footer-widget form button[type="submit"]').on('click', function(e){
      e.preventDefault();
      $('#test #prompt-background2').show();
    })
  })
</script>

<style>
  #prompt-background2 {
    background: url("{{ 'age-check-background.jpg' | asset_url }}") no-repeat center center fixed #555;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999999;
  }

  #prompt-background2 .img {
    text-align: center;
    margin: 15px 0;
  }

  #prompt-background2 .mc-field-group,
  #prompt-background2 h2,
  #prompt-background2 .indicates-required,
  #prompt-background2 .optionalParent
  {
    padding: 0 10px;
  }

  #prompt-background2 form .indicates-required {
    font-size: 16px !important;
  }

  #prompt-background2 h2 {
    text-align: center;
  }

  #prompt-background2 input[type="submit"]{
    margin: 30px 0 10px;
    font-size: 18px;
  }

  #prompt-background2 label {
    margin-top: 10px;
    margin-bottom: 2.5px !important;
    font-size: 16px !important;
  }

  #prompt-background2 .datefield span {
    display: inline-block;
    width: 50%;
  }

  #prompt-background2 .datefield span:first-child {
    padding-right: 10px
  }

  #prompt-background2 .datefield span:last-child {
    padding-left: 10px
  }

  #prompt-background2 select {
    height: 45px;
    background: #eceff8;
  }

  #prompt-background2 div[class*='flex'] > div {
    width: 50%;
  }

  #prompt-background2 .left {
    position: relative;
  }

  #prompt-background2 .img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #prompt-background2 .img img {
    max-width: 200px;
  }

  #prompt-background2 #newsletter-prompt {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: #F7BD00;
  }

  #newsletter-prompt {
    padding: 0 !important;
  } 
  #prompt-background2 .right {
      padding: 15px 10px;
    }
  @media all and (max-width: 768px){
    #prompt-background2 .left {
      display: none;
    }
  }

</style>