Javascript Firefox或Safari中未触发输入模式

Javascript Firefox或Safari中未触发输入模式,javascript,jquery,html,twitter-bootstrap,modal-dialog,Javascript,Jquery,Html,Twitter Bootstrap,Modal Dialog,当我在Firefox或Safari上单击modal时,它不会启动 我的HTML是: <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"/> </di

当我在Firefox或Safari上单击modal时,它不会启动

我的HTML是:

<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>

我尝试过使用数据切换,我尝试过在输入端使用类。什么都不管用。必须禁用输入

我不能直接谈论Safari,但是快速搜索看起来像Firefox在禁用元素上发生单击事件时不会将事件传播到DOM树上(请参阅)

看起来模态中的信息可能以不同的格式表示得最好。尝试使用或仅将要呼叫的号码放在禁用按钮附近

如果仍要使用模式,则必须遵循上面链接的主题中的建议,以实现跨浏览器兼容。您可以在这里找到示例:

下面是执行此“黑客”所需的HTML片段:


<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>
$(".DisabledCart").click(function (evt) {
     $('#NotAvailable').modal('show');
});
<span style="position:relative;">
    <input type="text" disabled />
    <div style="position:absolute; left:0; right:0; top:0; bottom:0; cursor: pointer;"></div>
</span>