黒いモーダルフェードがテキストフィールドに入力できないようにします

Question

リンクをクリックするとポップアップするモーダルを作成しようとしました。背景がぼやけてしまいますが、テキストフィールドに入力するのを妨げるフェードによってブロック全体がブロックされているようです。 これは次のように、それがどのように見えるかです：これは私のコードであるhttps://gyazo.com/d87f5beae17209d912169fde18bcdeb9

：

<div class="modal fade" id="new-item-modal" role="dialog" tabindex="-1"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4>Submit a New Item Ticket</h4> 
      </div> 
      <div class="modal-body"> 
       <form id="new-item-form"> 
        <div class="form-group"> 
         <label for="new-item-name">Item Name</label> 
         <input class="form-control" id="new-item-name" placeholder="item name"> 
        </div> 
        <div class="form-group"> 
         <label for="new-item-price">Item Price</label> 
         <div class="input-group"> 
          <div class="input-group-addon">$</div> 
          <input class="form-control" id="new-item-price" placeholder="item price"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label for="new-item-link">Item Link</label> 
         <input class="form-control" id="new-item-link" placeholder="item link"> 
        </div> 
        <input type="submit" value="Submit" class="btn btn-lg btn-success"> 
       </form> 
      </div> 
      <div class="modal-footer"> 
       <button class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

JS：

<script> 
$(function() { 
    var mAllItems = []; 

    $('#search').on('keypress', function (e) { 
     if (e.which === 13) { 
      var query = this.value; 

      var str = '<tr><th>Item Name</th><th>Item Price</th></tr>'; 

      if (query.length > 0) { 
       $.getJSON('php/search-items.php', {query: query}, function (jsonObj) { 
        $('#results').html(str); 
        handleJsonResponse(jsonObj, function (data) { 
         var allItems = data['allItems']; 

         allItems.sort(function (a, b) { 
          var keyA = a['price'], keyB = b['price']; 
          return keyB - keyA; 
         }); 

         mAllItems = []; 

         for (var i1 = 0; i1 < allItems.length; i1++) { 
          var item = allItems[i1]; 

          var name = item['name'], price = getFormattedPrice(item['price']); 

          mAllItems.push({id: i1, name: name}); 

          str += '<tr><td>' + name + '</td><td>' + price + ' <span class="item-price-change-btn" id="' + i1 + '">?</span></td></tr>'; 
         } 

         $('#results').html(str); 
         $('.item-price-change-btn').on('click', itemPriceChangeHandler); 
        }); 
       }); 
      } 
     } 
    }); 

    $('#new-item-form').on('submit', function() { 
     var itemName = $('#new-item-name').val(), 
      itemPrice = $('#new-item-price').val(), 
      itemLink = $('#new-item-link').val(); 

     if (itemName.length === 0 || itemPrice.length === 0 || itemLink.length === 0) { 
      return false; 
     } 

     $.post('php/new-item-ticket.php', {name: itemName, price: itemPrice, link: itemLink}, function (jsonObj) { 
      handleJsonResponse(jsonObj, function (data) { 
       var message = data['message']; 
       successMsg(message); 
       $('#new-item-modal').modal('hide'); 
      }); 
     }, 'json'); 

     return false; 
    }); 

    function itemPriceChangeHandler() { 
     var id = parseInt(this.id); 

     var item = null; 

     for (var i1 = 0; i1 < mAllItems.length; i1++) { 
      var i = mAllItems[i1]; 
      if (i['id'] === id) { 
       item = i; 
      } 
     } 

     $('#item-price-change-modal').modal('show'); 
     $('#item-price-change-name').val(item['name']); 
    } 

    $('#item-price-change-form').on('submit', function() { 
     var name = $('#item-price-change-name').val(), 
      price = $('#item-price-change-price').val(); 

     if (name.length === 0 || price.length === 0) { 
      return false; 
     } 

     $.post('php/item-price-change-ticket.php', {name: name, price: price}, function (jsonObj) { 
      handleJsonResponse(jsonObj, function (data) { 
       var message = data['message']; 
       successMsg(message); 
       $('#item-price-change-modal').modal('hide'); 
      }); 
     }, 'json'); 

     return false; 
    }); 
}); 
</script> 

Answer 1

内側の要素に外側の要素よりも高いz-インデックスを与えるようにしてください。

Answer 2

あなたのオーバーレイに

pointer-events: none; 

を適用してみます。