jquery - 无法检查 POPUP FORM 中的单选按钮

Question

我有一个用于按钮单击事件的弹出窗体。弹出窗口工作正常。但我无法检查表单中的单选按钮。不仅是单选按钮，还有其他一些输入字段。

这是迄今为止我尝试过的代码。我使用 z-index 来获取图层的差异。但是它没有用。

    $('#call-form').click(function(e){
      $('.req-cal-wrapper').fadeIn();
    });

    $('.req-cal-wrapper').on('click touch', function () {
      $('.inside-form').click(function(e){
        // e.stopPropagation;
        return false;
      });
      $('.req-cal-wrapper').fadeOut();
    });

 .req-cal-wrapper {
      position: fixed;
      height: 100vh;
      width: 100vw;
      background: #00000070;
      color: black;
      z-index: 999;
      top: 0;
      text-align: left;
    }
    .req-cal-wrapper>div {
      position: absolute;
      background: white;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      padding: 50px 60px;
      border-radius: 10px;
      font-family: 'Roboto', sans-serif;
      width: 500px;
      z-index: 1499;
    }
    .req-cal-wrapper>div>.btn-wrapper {
      margin-top: 15px;
      font-size: 14px;
      padding-bottom: 35px;
    }
    .req-cal-wrapper>div>.btn-wrapper ul {
      list-style-type: none;
    }
    .req-cal-wrapper>div>.btn-wrapper ul>li {
      float: left;
    }
    .req-cal-wrapper>div>.btn-wrapper ul>li input {
      float: left;
    }
    .req-cal-wrapper>div>.btn-wrapper ul>li p {
      margin-bottom: 0;
      float: right;
      margin-left: 2px;
      margin-right: 35px;
      font-weight: 400;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="req-cal-wrapper">
        <div class="inside-form">
           <div class="btn-wrapper">
              <ul>
                 <li><input type="radio" name="radio"><p>Phone</p></li>
                 <li><input type="radio" name="radio"><p>Whatsapp</p></li>
                 <li><input type="radio" name="radio"><p>Viber</p></li>
                 <li><input type="radio" name="radio"><p>Email</p></li>
               </ul>
           </div>
      </div>
    </div>

Answer 1

所以我从主 div 中取出了 .inside-form div，它按你想要的方式工作。

 

    $('.req-cal-wrapper').click(function () {
     $('.req-cal-wrapper').fadeOut();
     $('.inside-form').fadeOut();
      });
 
     

.req-cal-wrapper {
      position: relative;
      height: 100vh;
      width: 100vw;
      background: #00000070;
      color: black;
     
      top: 0;
      text-align: left;
    }
    
    .inside-form {
      position: absolute;
      background: white;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      padding: 50px 60px;
      border-radius: 10px;
      font-family: 'Roboto', sans-serif;
      width: 500px;
     
    }
    .btn-wrapper {
      margin-top: 15px;
      font-size: 14px;
      padding-bottom: 35px;
       
    }
.btn-wrapper ul {
      list-style-type: none;
       
    }
  .btn-wrapper ul>li {
      float: left;
        
    }
   .btn-wrapper ul>li input {
      float: left;
        
    }
   .btn-wrapper ul>li p {
      margin-bottom: 0;
      float: right;
      margin-left: 2px;
      margin-right: 35px;
      font-weight: 400;
       
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="req-cal-wrapper">
       
    </div>
     <div class="inside-form">
           <div class="btn-wrapper">
              <ul>
                 <li><input type="radio" name="radio"><p>Phone</p></li>
                 <li><input type="radio" name="radio"><p>Whatsapp</p></li>
                 <li><input type="radio" name="radio"><p>Viber</p></li>
                 <li><input type="radio" name="radio"><p>Email</p></li>
               </ul>
           </div>
      </div>