1

正如向我建议的那样，我使用 tooltipster 来获取带有验证插件的错误消息。此解决方案效果很好，但是当我打开对话框窗口时出现问题。如果出现错误消息 (tooltipster) 并且我打开一个对话框 (fancybox v2)，则 tooltipster 在对话框窗口中保持活动状态。为了解决这个问题，我尝试在fancybox beforeShow 事件中关闭tooltipster，但是这样当我关闭对话框并尝试重新验证tooltip 时不再打开。

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

4

2 回答 2

2

你应该能够做一个 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。

于 2014-11-25T15:40:31.987 回答
1

使用 z-index。使花式框更高，工具提示器更低：

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

}
于 2014-11-25T15:40:19.263 回答