如何在 alpineJS 中隐藏 bootstrap 模态对话框之外的内容?
How in alpineJS to shadow content beyond bootstrap modal dialog?
在 Bootstrap 4.5/jquery 3.3 / alpinejs 2.2 应用程序中,我显示的图像有大小限制
然后单击图像,我使用 aplineJS 方法打开模式对话框
x-on:click="show_hostel_image_modal = true"
它打开正常,但我不喜欢对话框后面的所有内容都可见。
如果有办法隐藏它,而不调用 bootstrap js 方法,因为我从 jquery 方法移动?
我有:
@if(!empty($currentHostelImage))
<div
x-data="{ show_hostel_image_modal: false, hostelImages: <?php print prepareEncodeArray($hostelImages) ?>, current_image_id:
{{$currentHostelImage->id }}, currentImage : {{$currentHostelImage }} } "
class="hostel_images_block_wrapper">
<div
class="modal_editor_container p-2"
x-show="show_hostel_image_modal"
@click.away="show_hostel_image_modal = false"
>
<div
class="modal_editor_title"
>
<h4 class="modal-title p-2">
{!! $viewFuncs->showAppIcon('image') !!}Image view : <span x-html="currentImage.filenameData.image"></span>
<button class="close" type="button" x-on:click="show_hostel_image_modal= false">
<i class="test-device p-2 pl-4 pr-4 m-0"></i>
<span aria-hidden="true">×</span>
</button>
</h4>
</div> <!-- modal_editor_title -->
<div class="modal_editor_fields" :style="'max-height: ' + ( modalHeight() - 20 ) +'px; '">
<div x-show="typeof currentImage.filenameData != 'undefined'">
<img :src="currentImage.filenameData.image_url" class="hostel_dialog_image m-1 p-1"
:class="{ 'hostel_image' : true }"
>
<div class="alert alert-info" role="alert">
{!! $viewFuncs->showAppIcon('info') !!}
<span x-html="currentImage.filenameData.file_info"></span>
</div>
</div> <!-- <div> -->
</div> <!-- modal_editor_fields-->
</div> <!-- <div class="modal_editor_container"> -->
<template x-for="nextHostelImage in hostelImages">
<div class="hostel_view_current_image_wrapper" x-show="current_image_id === nextHostelImage.id ">
<img :src="nextHostelImage.filenameData.image_url" class="hostel_view_current_image"
:alt="nextHostelImage.filenameData.file_info" x-on:click="show_hostel_image_modal = true" data-toggle="tooltip"
data-placement="top" title="Click to view in full size">
</div>
</template>
</div>
@endif
风格:
.modal_editor_container {
width: 90%;// !important;
top: 20px;
left: 50px;
position: absolute;
z-index: 900;
flex: 1;
flex-direction: column;
justify-items: flex-start;
padding: 0;
margin: 0;// !important;
}
已修改:
我尝试按照您在 fiddle 中的步骤使用我的导航菜单。
你能看看吗https://jsfiddle.net/z83m7fnc/
我只需要注意 hostel_images_block_wrapper - 这是所有图像块的包装器 class 并且
modal_editor_container class 模态对话框。
谢谢!
您可以将透明背景应用于 div.hostel_images_block_wrapper
.hostel_images_block_wrapper {
background-color: rgba(0,0,0,0.5);
position: absolute; (could also be fixed)
top: 0;
left: 0;
height: 100vh;
width: 100%;
}
确保检查此元素的 z-index 以及它在您页面上下文中的包含元素。
使用 javascript,您可以通过在正文中添加 overflow-y: hidden
来阻止页面在模式后面滚动。
在您的 div.hostel_images_block_wrapper 上添加以下侦听器
@body-scroll="document.body.style.overflowY = open ? 'hidden' : ''"
然后从任何具有点击的元素甚至更新您的 show_hostel_image_modal
属性,您可以调度以下自定义事件:
@click="$dispatch('body-scroll', {})"
作为旁注,因为 AlpineJS 包含得很好,你不需要对你的变量名如此具体。例如,show_hostel_image_modal
可能只是 show
或 open
。您可以通过这种方式清理大量冗余命名并使您的标记更加清晰。
在 Bootstrap 4.5/jquery 3.3 / alpinejs 2.2 应用程序中,我显示的图像有大小限制 然后单击图像,我使用 aplineJS 方法打开模式对话框
x-on:click="show_hostel_image_modal = true"
它打开正常,但我不喜欢对话框后面的所有内容都可见。 如果有办法隐藏它,而不调用 bootstrap js 方法,因为我从 jquery 方法移动?
我有:
@if(!empty($currentHostelImage))
<div
x-data="{ show_hostel_image_modal: false, hostelImages: <?php print prepareEncodeArray($hostelImages) ?>, current_image_id:
{{$currentHostelImage->id }}, currentImage : {{$currentHostelImage }} } "
class="hostel_images_block_wrapper">
<div
class="modal_editor_container p-2"
x-show="show_hostel_image_modal"
@click.away="show_hostel_image_modal = false"
>
<div
class="modal_editor_title"
>
<h4 class="modal-title p-2">
{!! $viewFuncs->showAppIcon('image') !!}Image view : <span x-html="currentImage.filenameData.image"></span>
<button class="close" type="button" x-on:click="show_hostel_image_modal= false">
<i class="test-device p-2 pl-4 pr-4 m-0"></i>
<span aria-hidden="true">×</span>
</button>
</h4>
</div> <!-- modal_editor_title -->
<div class="modal_editor_fields" :style="'max-height: ' + ( modalHeight() - 20 ) +'px; '">
<div x-show="typeof currentImage.filenameData != 'undefined'">
<img :src="currentImage.filenameData.image_url" class="hostel_dialog_image m-1 p-1"
:class="{ 'hostel_image' : true }"
>
<div class="alert alert-info" role="alert">
{!! $viewFuncs->showAppIcon('info') !!}
<span x-html="currentImage.filenameData.file_info"></span>
</div>
</div> <!-- <div> -->
</div> <!-- modal_editor_fields-->
</div> <!-- <div class="modal_editor_container"> -->
<template x-for="nextHostelImage in hostelImages">
<div class="hostel_view_current_image_wrapper" x-show="current_image_id === nextHostelImage.id ">
<img :src="nextHostelImage.filenameData.image_url" class="hostel_view_current_image"
:alt="nextHostelImage.filenameData.file_info" x-on:click="show_hostel_image_modal = true" data-toggle="tooltip"
data-placement="top" title="Click to view in full size">
</div>
</template>
</div>
@endif
风格:
.modal_editor_container {
width: 90%;// !important;
top: 20px;
left: 50px;
position: absolute;
z-index: 900;
flex: 1;
flex-direction: column;
justify-items: flex-start;
padding: 0;
margin: 0;// !important;
}
已修改: 我尝试按照您在 fiddle 中的步骤使用我的导航菜单。
你能看看吗https://jsfiddle.net/z83m7fnc/
我只需要注意 hostel_images_block_wrapper - 这是所有图像块的包装器 class 并且 modal_editor_container class 模态对话框。
谢谢!
您可以将透明背景应用于 div.hostel_images_block_wrapper
.hostel_images_block_wrapper {
background-color: rgba(0,0,0,0.5);
position: absolute; (could also be fixed)
top: 0;
left: 0;
height: 100vh;
width: 100%;
}
确保检查此元素的 z-index 以及它在您页面上下文中的包含元素。
使用 javascript,您可以通过在正文中添加 overflow-y: hidden
来阻止页面在模式后面滚动。
在您的 div.hostel_images_block_wrapper 上添加以下侦听器
@body-scroll="document.body.style.overflowY = open ? 'hidden' : ''"
然后从任何具有点击的元素甚至更新您的 show_hostel_image_modal
属性,您可以调度以下自定义事件:
@click="$dispatch('body-scroll', {})"
作为旁注,因为 AlpineJS 包含得很好,你不需要对你的变量名如此具体。例如,show_hostel_image_modal
可能只是 show
或 open
。您可以通过这种方式清理大量冗余命名并使您的标记更加清晰。