在 Firefox 或 Safari 中输入未触发的模态
Modal on input not firing in Firefox or Safari
当我在 Firefox 或 Safari 上单击它时,我的模态没有触发。
我的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>
我的模态是:
<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>
我的JS是:
$(".DisabledCart").click(function (evt) {
$('#NotAvailable').modal('show');
});
我尝试过使用数据切换,我尝试在输入上使用类。什么都没用。必须禁用输入。
我不能直接为 Safari 说话,但快速搜索看起来 Firefox 不会在禁用元素上发生单击事件时将事件传播到 DOM 树上(请参阅禁用输入上的事件)。
看起来您的模态中的信息可能以不同的格式表示得最好。尝试使用 Bootstrap 的弹出框,或者只是将要呼叫的号码放在禁用按钮附近。
如果您仍然想使用模态,则必须遵循上面链接的主题中的建议才能跨浏览器兼容。你可以在这里找到这个例子:JSFiddle
以下是执行此"黑客"所需的HTML片段:
<span style="position:relative;">
<input type="text" disabled />
<div style="position:absolute; left:0; right:0; top:0; bottom:0; cursor: pointer;"></div>
</span>
相关文章:
- 模态上的输入/注册字段不起作用
- jquery模态对话框通过id获取输入类型text的值
- 将隐藏输入类型转移到我的隐藏模态/表单
- jQuery带有文本输入的模态消息
- 使用模态上的文件输入字段更新主视图上的隐藏字段
- 如何在角度模态服务中将输入值传递给控制器
- 当输入框暗示为模态时,HTML ajax标签不显示
- 获取<输入类型=“;文本“>它是在模态中动态创建的
- 如何在模态中设置对输入的关注
- 如何将输入字段绑定到一个模态输入字段
- 当我关闭模态时,选中的输入变为未选中
- Bootstrap 3 Modal将不显示模态标题或输入标签
- 如何使用javascript打开Sharepoint模态对话框来提示用户输入
- 在输入焦点上让背景看起来像模态
- Jquery模态窗口只在输入值长度大于2时显示
- 从模态中获取输入值
- 如何根据模态选择更新输入
- 模态输入与输入值触发器
- JQuery模态表单输入字段自动对焦问题
- 在Code Behind/ASP.net中基于用户输入显示模态对话框/确认框