Search code examples
javascriptjquerysimplemodal

I need show a modal if these strings contains the page into a div


For example, i have 3 strings to verify if contains in a page, if this strings are not in this page the modal doesn't load on page, and if string contains on page load this opens this modal.

$(document).ready(function() {
    $('.fl-product-ref').load(function(){
      var lightBox = $('.skuReference');
      switch(false) {
        case (lightBox.find('LNC-L4139800')):
        case (lightBox.find('LNC-L6669601')):
        case (lightBox.find('LNC-L6669600')):
            lightBox.removeClass('hidden').addClass('visible');
            break;
        default:
            lightBox.addClass('hidden');
            break; 
      }
    });
}
<span class="fl-product-ref">
  <div class="skuReference">LNC-L4139800</div>
</span>

<div class="skuModal hidden">
  This is the modal!
</div>


Solution

  • <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    
        <style type="text/css">
            .hidden{
          visibility :hidden;
        }
        </style>
    </head>
    <body>
    
    <span class="fl-product-ref">
      <div class="skuReference">LNC-L4139800</div>
      <div class="skuReference">LNC-L4139800</div>
      <div class="skuReference">LNC-L6669601</div>
      <div class="skuReference">LNC-L4139800</div>
    </span>
    
    <div class="skuModal hidden">
      This is the modal!
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
       // $('.fl-product-ref').load(function(){
          var arr = $('.skuReference').map(function(index , val){ return $(val).text()});
          //["LNC-L4139800", "LNC-L4139800", "LNC-L6669601", "LNC-L4139800"]
    
          switch(true) {
            case ($.inArray("LNC-L4139800", arr) !== -1):
            case ($.inArray("LNC-L6669601", arr) !== -1):
            case ($.inArray("LNC-L6669600", arr) !== -1):
                $('.skuModal').removeClass('hidden').addClass('visible');
                break;
            default:
                $('.skuModal').addClass('hidden');
                break; 
          }
        //});
    });
    </script>
    </body>
    </html>