时间戳

首页 > 解决方案 > alpineJS 如何在引导模式对话框之外隐藏内容？

twitter-bootstrap - alpineJS 如何在引导模式对话框之外隐藏内容？

问题描述

在 Bootstrap 4.5/jquery 3.3 / alpinejs 2.2 应用程序中，我显示具有大小限制的图像并单击图像，我使用 aplineJS 方法打开模式对话框

x-on:click="show_hostel_image_modal = true"

它打开正常，但我不喜欢对话框后面的所有内容都是可见的。如果有一种方法可以隐藏它，而无需调用引导 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">&times;</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;
}

已修改： 我尝试按照您的步骤操作我的导航菜单。

你能看看https://jsfiddle.net/z83m7fnc/

我只需要注意 hostel_images_block_wrapper - 这是所有图像块的包装类和模态对话框的 modal_editor_container 类。

谢谢！

标签： twitter-bootstrapalpine.js

解决方案

您可以将透明背景应用于您的 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 以及它在您的页面上下文中包含的元素。

overflow-y: hidden使用 javascript，您可以通过添加到正文来阻止页面在模式后面滚动。

在您的 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。您可以通过这种方式清理大量冗余命名，并使您的标记更加清晰。

推荐阅读