title: jQuery 403 Forbidden when loading image
body: <p>I'm trying to load an image into my modal plugin, but for some reason it's giving me a 403 Forbidden error. The actual error I get is this:</p>
  
  <pre><code>"NetworkError: 403 Forbidden - http://localhost/Groundwork/%3Cimg%3E"
  </code></pre>
  
  <p>The image is in the root folder so I know it's there, I'm just not sure why it's having issues. If it matters I'm using XAMPP. Here's my modal code:</p>
  
  <pre><code>(function($)
  {
      $.fn.modal = function(userOptions)
      {
          var defaultOptions = 
          {
              size        :   null, 
              url         :   null,
              image       :   null 
          }
  
          options = $.extend({}, defaultOptions, userOptions);
  
          $(this).addClass('modal-show');
          var id = $(this).data('modal-id');
          buildModal($(this), id);
      };
  
      function buildModal(element, id)
      {
          //  Create the modal window container
          var modalWindow = document.createElement('div');
          $(modalWindow).attr('id', id).addClass('modal');
  
          //  Create the modal body where we will load the external html/image
          var modalBody = document.createElement('div');
          $(modalBody).addClass('modal-body');
  
          //  If the user provides an external link/image then load that image into the modal body
          if (options.url &amp;&amp; options.image == false)
          {
              $(modalBody).load(options.url);
          }
  
          else if (options.url &amp;&amp; options.image == true)
          {
              var img = "&lt;img&gt;";
              $(img).attr('src', options.url);
              $(img).attr('alt', options.url);
              $(modalBody).load(img);
          }
  
          else
          {
              //  If the user doesn't not provide an external link or image then take the element
              //  calling this plugin and load it's contents into the modal
              $(modalBody).append(element.contents());
          }
  
          //  Create and add the close button
          var closeBtn = document.createElement('button');
          $(closeBtn).addClass('close');
          $(closeBtn).html('&amp;times;');
  
          // Finally let's add the content to the modal itself
          $(modalWindow).append(modalBody);
          $('body').append(modalWindow);
  
          // Finally let's add the content to the modal itself
          $(modalWindow).append(modalBody);
          $(modalWindow).append(closeBtn);
          $('body').append(modalWindow);
      }
  
      function closeModal(id)
      {
          var modalID = '#' + id;
  
          //  Get the DOM that contains the modal so we can remove the backdrop
          var content = $('.modal-backdrop').contents();
  
          //  Have the backdrop and the modal fade out
          $(content).fadeOut();
  
          // Remove the backdrop from around the modal
          $('.modal-backdrop').replaceWith(content);  
      }
  
      function showModal(id)
      {
          var modalID = '#' + id;
  
          /*
          *   Add the backdrop around the modal (This is done primarily
          *   to make the developer's life easier so that they don't
          *   have to create the div for the backdrop.
          */
          $(modalID).wrapAll('&lt;div class="modal-backdrop"&gt;');
  
          // Have the backdrop and the modal fade in
          $('.modal-backdrop').fadeIn().find(modalID).fadeIn();
      }
  
      $('body').on('click', '.modal-show', function(event)
      {
          event.preventDefault();
  
          //  Get the ID of the modal that we want to show
          var id = $(this).data('modal-id');
          showModal(id);
      });
  
      $('body').on('click', '.close', function(event)
      {
          event.preventDefault();
  
          //  Get the ID of the modal that we want to show
          var id = $(this).data('modal-id');
  
          closeModal(id);
      });
  }
  </code></pre>
  
  <p>Any ideas why I'm getting this error?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>If I try to load options.url this is what happens:
  <img src="https://i.stack.imgur.com/ys60r.png" alt="The Problem"></p>