我一直在玩很棒的插件:tether
我在手动加载 Bootstrap (v3) 弹出窗口时遇到问题,视口(viewport)外的弹出窗口会显示在视口(viewport)底部的错误位置。因此,我决定尝试使用此插件作为替代方案。
我一直在尝试使用基本的系绳选项来验证我在表单中的输入之一,该表单是使用 laravel 表单生成器制作的。 (输入的 form-group
是目标元素)。
问题:
但由于某种原因,它似乎加载到目标元素的左侧(在不正确的位置)。当视口(viewport)发生变化(页面大小调整或滚动等)时,它会更新到目标元素的右侧(在正确的位置)。
我不确定它为什么这样做,关于如何让它加载到正确位置有什么想法吗?
示例:
HTML:
{!! Form::model( $article = new \App\Article, ['id' => 'form-article', 'route' =>'articles.store', 'class' => 'row']) !!}
<div class="row">
<div class="form-group col-lg-12 title">
{!! Form::text('title', null, ['id' => 'title', 'class' => 'form-control', 'placeholder' => 'Title']) !!}
</div>
</div>
<div class="row">
<div class="form-group col-lg-12 body">
{!! Form::textarea('body', null, ['id' => 'body', 'class' => 'form-control', 'placeholder' => 'Body']) !!}
</div>
</div>
{!! Form::close() !!}
<script type="text/javascript">
$( document ).ready(function()
{
var errors = ({!! json_encode($errors->toArray()) !!});
var form = ({!! json_encode($form) !!});
console.log(errors);
outputValidationPopovers(form, errors);
});
</script>
JavaScript:
function outputValidationPopovers(formId, errors)
{
$.each(errors, function (eKey, messages)
{
var $newPopover = $('<div class="tether-'+eKey+'">stuff</div>');
$newPopover.css('z-index', '1030').css('background-color', 'red');
$(formId).append($newPopover);
new Tether(
{
element: '.tether-'+ eKey,
target: '.'+eKey,
attachment: 'middle right',
targetAttachment: 'middle right',
});
});
}
最佳答案
好吧,没有关于如何解决这个问题的建议……所以我最终通过使用另一个使用 tether 作为依赖的插件解决了这个问题。这个插件叫做 drop.js并且非常适合所需的要求。我更改了功能以包含此功能而不是系绳初始化。
var drop = new Drop({
target: $input.closest('.form-group')[0],
content: messages[0],
classes: 'drop-theme-arrows-bounce drop-danger drop-form-'+formId+' target-' + eKey + ' ' + popoverClass,
position: 'right middle',
openOn: 'always'
});
关于javascript - 在视口(viewport)更改之前,系绳元素位置不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40486696/