Modal on input not firing in Firefox or Safari

Question

My modal isn't firing when I click it on Firefox or Safari.

My HTML is:

<div class="DisabledCart">
    <input type="submit" id="StandardProductAddToCart" name="Add to Cart" value="ADD TO CART" alt="Add to Cart" style="cursor:not-allowed;" disabled="disabled"/>
</div>

My modal is:

<div class="modal fade" id="NotAvailable" tabindex="-1" role="dialog" aria-labelledby="NotAvailableLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <img class="closeModal" data-dismiss="modal" aria-hidden="true" src="http://cdnll.amleo.com/images/art/x_white.png" height="20" width="20" alt="X" />
        <h4 class="modal-title" id="myModalLabel">Not Available</h4>
      </div>
      <div class="modal-body">
        <div class="alert alert-danger"><strong>Not available for online orders. Please call 1-800-543-8995 to order; thank you.</strong></div>
      </div>
        </form>
      </div>
    </div>
  </div>
</div>

My JS is:

$(".DisabledCart").click(function (evt) {
     $('#NotAvailable').modal('show');
});

I've tried using data toggles, I've tried using the class on the input. Nothing works. The input must be disabled.

Answer 1

I can't speak directly for Safari, but a quick search looks like Firefox does not propagate the event up the DOM tree when a click event happens on a disabled element (see Event on a disabled input).

It looks like the information in your modal might be represented best in a different format. Try using Bootstrap's popovers or just placing the number to call near the disabled button.

If you still want to use a modal, you will have to follow the advice in the topic linked above in order to be cross-browser compatible. You can find the example here: JSFiddle

Here's a snippet of the HTML required to perform this "hack":

<span style="position:relative;">
    <input type="text" disabled />
    <div style="position:absolute; left:0; right:0; top:0; bottom:0; cursor: pointer;"></div>
</span>