如果在移动设备上离屏，引导弹出框将无法正确显示答案

【问题标题】：Bootstrap Popovers will not show properly if offscreen on a mobile device如果在移动设备上离屏，引导弹出框将无法正确显示
【发布时间】：2015-04-07 19:57:23
【问题描述】：

正如标题所说，如果离开屏幕，弹出框将无法正确显示。这似乎是有道理的，但弹出框的箭头仍然出现。我需要弹出框在页面上可见，即使它不在屏幕上。

我正在使用弹出框作为表单上的验证通知。我正在使用 jquery validate，插件。

这是发生的事情的图像。

验证代码如下：

$(document).ready(function () {
        $("#form1").validate({
            onsubmit: false,
            rules: {
                ctl00$MainContent$txtEventName: { required: true },
                ctl00$MainContent$txtEventDate: { required: true, date: true },
                ctl00$MainContent$txtEventGuests: { required: true, number: true },
                ctl00$MainContent$txtZip: { required: true, number: true, minlength: 5 },
                ctl00$MainContent$txtEmail: { required: true, email: true },
                ctl00$MainContent$txtPwd: { required: true },
                ctl00$MainContent$txtConfirmPwd: { equalTo: "#MainContent_txtPwd" }
            },
            messages: {
                ctl00$MainContent$txtEventName: "Please enter the event name",
                ctl00$MainContent$txtEventDate: "Please enter a date that is not before today",
                ctl00$MainContent$txtEventGuests: "Please enter the amount of guests attending the event",
                ctl00$MainContent$txtZip: "Please enter a valid zipcode",
                ctl00$MainContent$txtEmail: "Please enter a valid email address",
                ctl00$MainContent$txtConfirmPwd: "Your passwords must match"
            },
            showErrors: function (errorMap, errorList) {
                //$.each(this.successList, function(index, value) {
                //    return $(value).popover("hide");
                //});
                return $.each(errorList, function(index, value) {
                    var _popover;
                    _popover = $(value.element).popover({
                        placement: "right",
                        content: value.message,
                        template: "<div class=\"popover\" style='width: 195px;'><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"></div></div></div>"
                    });
                    return $(value.element).popover("show");
                });
            },
            submitHandler: function (form) { // for demo
                return false; // for debug
            }
        });
    });

有人对我可以做些什么来解决这个问题有任何想法吗？

【问题讨论】：

标签： jquery asp.net twitter-bootstrap jquery-validate bootstrap-popover

【解决方案1】：

你的方法有点缺陷。 showErrors 用于为整个表单编写错误消息列表；它通常不用于处理发生的每条消息。对于工具提示，您需要在出现时处理每条消息，而不是一次处理所有消息。

要显示/隐藏错误提示，您需要改用 errorPlacement 和 success 回调函数。

根据需要调整 Bootstrap 弹出框...

$(document).ready(function () {

    $('#myform').validate({
          // rules and options here,
          errorPlacement: function (error, element) {
              // construct tooltip with message as per plugin method
              // show tooltip
          },
          success: function (label, element) {
              // hide tooltip as per plugin method
          }
    });

});

参考：https://stackoverflow.com/a/14741689/594235

文档：http://jqueryvalidation.org/validate

另外，这里有一个插件，它应该自动将 jQuery Validate 与 Bootstrap Popovers 集成，但是，我自己从未使用过它。

https://github.com/mingliangfeng/jquery.validate.bootstrap.popover

【讨论】：