Bootstrap 如果在移动设备屏幕外，弹出窗口将无法正确显示

Question

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

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

这是发生的事情的图像。

验证代码如下：

$(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
            }
        });
    });

有人知道我可以做些什么来解决这个问题吗？

Answer 1

您的方法略有缺陷。 showErrors 用于组成整个表单的错误信息列表；它通常不用于处理每条消息。对于工具提示，您需要在每条消息出现时对其进行处理，而不是一次处理所有消息。

对于错误的 showing/hiding 工具提示，您需要改用 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
          }
    });

});

参考：

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

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

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

Bootstrap 如果在移动设备屏幕外，弹出窗口将无法正确显示

Bootstrap Popovers will not show properly if offscreen on a mobile device

jquery

asp.net

twitter-bootstrap

jquery-validate

bootstrap-popover