Question

正如我所建议的那样，我使用tooltipster将错误消息与验证插件一起使用。这个解决方案效果很好，但是当我打开一个对话框窗口时遇到了问题。如果出现错误消息（tooltipster）并且我打开一个对话框（fancybox v2），工具提示器在对话框窗口中保持活动状态。为了解决这个问题，我尝试在fancybox beforeShow事件中关闭工具提示器，但是这样当我关闭对话框并尝试重新验证工具提示时不再打开。

// initialize tooltipster on text input elements
$('#form-test select').tooltipster({
    trigger: 'custom',
    onlyOne: false,
    position: 'bottom'
});

// initialize validate plugin on the form
$("#form-test").validate({
    rules: {
        user: "required",
    },
    messages: {
        user: "error",
    },
    errorPlacement: function (error, element) {

        var lastError = $(element).data('lastError'),
            newError = $(error).text();

        $(element).data('lastError', newError);

        if (newError !== '' && newError !== lastError) {
            $(element).tooltipster('content', newError);
            $(element).tooltipster('show');
        }
    },
    success: function (label, element) {
        $(element).tooltipster('hide');
    },
    submitHandler: function (form) { // for demo
        alert('valid form');
        return false;
    }
});


// fancybox v 2.1.5
$(".various").fancybox({
    maxWidth    : 300,
    maxHeight   : 300,
    fitToView   : false,
    width       : '70%',
    height      : '70%',
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    type        : 'inline',
    href        : '#modal-msg',
    beforeShow : function()
    {
        // Remove validation tooltipster in the 
        // parent page if present
        //$('[id^="form-"] :input').tooltipster('hide');
    }
});

HTML

<div id="container">
<form id="form-test" action="#">
<select name="user" id="test">
    <option value=""></option>
    <option value="1">1</option>
    <option value="1">2</option>
    <option value="1">3</option>
</select>
<input type="submit" id="validate-btn" value="validate" />
</form>
<br />
<br />
<br />
<input type="button" class="various" value="Open dialog" />
<div id="modal-msg"></div>
</div>

我该如何解决？感谢

这是一个演示：

http://jsfiddle.net/2012j6dv/10/

Answer 1

你应该能够做一个z-index hack。

尝试

beforeShow : function() {
    // adjust tooltipster's z-index to be less than the fancybox-overlay
    var z = $(".fancybox-overlay").css('z-index');
    $(".tooltipster-base").css('z-index', z-1);
}

或者反过来

beforeShow : function() {
    // adjust fancybox-overlay z-index to be greater than the tooltipster's 
    var z = $(".tooltipster-base").css('z-index');
    $(".fancybox-overlay").css('z-index', z+1);
}

我认为这比硬编码CSS指令更安全，因为其中一个或两个插件可以动态计算其z-index。

Answer 2

使用z-index进行游戏。使fancybox更高，工具提示器更低：

.tooltipster-base {
    padding: 0px;
    font-size: 0px;
    line-height: 0;
    position: absolute;
    z-index: 99;  //default is 999999
    pointer-events: none;
    width: auto;
    overflow: visible;

}

Jquery如何隐藏tooltipster验证消息

2 个答案: