Я использую стандартную HTML-таблицу по щелчку мыши, я открываю модальное окно. Когда пользователь находится внизу таблицы или где-то посередине, при нажатии модальное окно открывается вверху страницы, и пользователю приходится снова прокручивать вверх, чтобы увидеть модальное окно. ниже приведен скриншот, где фон не покрывает всю страницу, а модальное окно находится вверху страницы.

enter image description here

HTML

<template>
    <lightning-card variant="Narrow" title="Call Block Manager" icon-name="standard:voice_call">
        <template if:true={showTable}>
            <c-paginator records={records} total-records={records.length} show-search-box="true"
                onpaginatorchange={handlePaginatorChange} class={pagi} device-is-mobile="true">
            </c-paginator>
        </template>
        <lightning-combobox
            class="slds-is-resizable dv-dynamic-width slds-p-right_xx-small slds-p-left_xx-small slds-m-bottom_x-small"
            name="progress" label="" value={value} placeholder="Sort By Date" options={sortOptions}
            onchange={handleSortChange}>
        </lightning-combobox>
        <div id="containerDiv" class="slds-table_header-fixed_container slds-border_right slds-border_left">
            <table class="slds-table slds-table_header-fixed slds-table_resizable-cols slds-table_fixed-layout">
                <thead>
                    <tr>
                        <th class="slds-is-resizable dv-dynamic-width" scope="col" style={fixedWidth}
                            title="Company Name">
                            <div class="slds-cell-fixed" style={fixedWidth}>
                                <a class="slds-th__action slds-text-link--reset ">
                                    <span class="slds-truncate">Company Name</span>
                                </a>
                                <div class="slds-resizable">
                                    <span class="slds-resizable__handle" onmousedown={handlemousedown}>
                                        <span class="slds-resizable__divider"></span>
                                    </span>
                                </div>
                            </div>
                        </th>
                        <th class="slds-is-resizable dv-dynamic-width" scope="col" style={fixedWidth}
                            title="Contact Name">
                            <div class="slds-cell-fixed" style={fixedWidth}>
                                <a class="slds-th__action slds-text-link--reset ">
                                    <span class="slds-truncate">Contact Name</span>
                                </a>
                                <div class="slds-resizable">
                                    <span class="slds-resizable__handle" onmousedown={handlemousedown}>
                                        <span class="slds-resizable__divider"></span>
                                    </span>
                                </div>
                            </div>
                        </th>
                        <th class="slds-is-resizable dv-dynamic-width" scope="col" style={fixedWidth} title="Address">
                            <div class="slds-cell-fixed" style={fixedWidth}>
                                <a class="slds-th__action slds-text-link--reset ">
                                    <span class="slds-truncate">Address</span>
                                </a>
                                <div class="slds-resizable">
                                    <span class="slds-resizable__handle" onmousedown={handlemousedown}>
                                        <span class="slds-resizable__divider"></span>
                                    </span>
                                </div>
                            </div>
                        </th>
                        <th class="slds-is-resizable dv-dynamic-width" scope="col" style={fixedWidth} title="Industry">
                            <div class="slds-cell-fixed" style={fixedWidth}>
                                <a class="slds-th__action slds-text-link--reset ">
                                    <span class="slds-truncate">Industry</span>
                                </a>
                                <div class="slds-resizable">
                                    <span class="slds-resizable__handle" onmousedown={handlemousedown}>
                                        <span class="slds-resizable__divider"></span>
                                    </span>
                                </div>
                            </div>
                        </th>
                        <th data-type="date" class="slds-is-resizable dv-dynamic-width" scope="col" style={fixedWidth}
                            title="Date Added">
                            <div class="slds-cell-fixed" style={fixedWidth}>
                                <a class="slds-th__action slds-text-link--reset ">
                                    <span class="slds-truncate">Date Added</span>
                                </a>
                                <div class="slds-resizable">
                                    <span class="slds-resizable__handle" onmousedown={handlemousedown}>
                                        <span class="slds-resizable__divider"></span>
                                    </span>
                                </div>
                            </div>
                        </th>
                        <th class="slds-is-resizable dv-dynamic-width" scope="col" style={fixedWidth} title="Phone">
                            <div class="slds-cell-fixed" style={fixedWidth}>
                                <a class="slds-th__action slds-text-link--reset ">
                                    <span class="slds-truncate">Phone</span>
                                </a>
                                <div class="slds-resizable">
                                    <span class="slds-resizable__handle" onmousedown={handlemousedown}>
                                        <span class="slds-resizable__divider"></span>
                                    </span>
                                </div>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <template if:false={norecord}>
                        <template if:true={recordsToDisplay}>
                            <template for:each={recordsToDisplay} for:item="item" for:index="index">
                                <tr key={item.id} class="slds-m-top_xx-small">
                                    <td data-column="Company">
                                        <lightning-icon icon-name={item.iconToDisplay} size="x-small">
                                        </lightning-icon>&nbsp;
                                        {item.Company}
                                    </td>
                                    <td data-column="Name">{item.Name}</td>
                                    <td data-column="Address" style="white-space: normal;">{item.Address}</td>
                                    <td data-column="Industry">{item.Industry}</td>
                                    <td data-column="CreatedDate">
                                        {item.dateadded}</td>
                                    <td data-column="Phone" onclick={openmodal} data-index={index}>
                                        <lightning-icon icon-name="utility:call" size="x-small">
                                        </lightning-icon>
                                        <a href={item.ph} value={index}>{item.Phone}</a>
                                    </td>
                                </tr>
                            </template>
                        </template>
                    </template>
                </tbody>
            </table>
            <template if:true={norecord}>
                <h1 class="slds-text-heading_medium" style="text-align: center;color: red;">No record Found</h1>
            </template>
        </div>
    </lightning-card>
    <template if:true={showModal}>

        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
            aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <header class="slds-modal__header">
                    <lightning-button-icon variant="border-filled" class="slds-modal__close" onclick={handleCancel}
                        icon-name="utility:close" alternative-text="Close" title="Close"></lightning-button-icon>
                    <h2 class="slds-modal__title slds-hyphenate">Update Activity</h2>
                </header>
                <div class="slds-modal__content slds-p-around_medium my-modal-inputs">
                    <lightning-tabset variant="scoped">

                        <lightning-tab label="Update Activity">
                            <template if:true={showActivity}>
                                <lightning-layout multiple-rows>
                                    <lightning-layout-item size=6 class="slds-m-top_small">
                                        <lightning-input type="text" label="Name" value={name} readonly>
                                        </lightning-input>

                                    </lightning-layout-item>
                                    <lightning-layout-item size=6 class="slds-m-top_small">
                                        <lightning-input type="phone" label="Phone" value={phonetodisplay} readonly>
                                        </lightning-input>
                                    </lightning-layout-item>
                                    <lightning-layout-item size=6 class="slds-m-top_small">
                                        <lightning-input type="text" label="Company Name" value={companyname} readonly>
                                        </lightning-input>
                                    </lightning-layout-item>
                                    <lightning-layout-item size=12 class="slds-m-top_small">
                                        <lightning-input label="Subject" value={sub}></lightning-input>
                                    </lightning-layout-item>
                                    <lightning-layout-item size=12 class="slds-m-top_small">
                                        <template if:true={calldispositionPicklist.data}>
                                            <lightning-combobox name="Call Block Disposition"
                                                label="Call Block Disposition" value={value}
                                                options={calldispositionPicklist.data.values} onchange={handleChange}>
                                            </lightning-combobox>
                                        </template>
                                    </lightning-layout-item>
                                    <lightning-layout-item size=12 class="slds-m-top_small">
                                        <lightning-input label="Schedule Follow Up on Next Call Block"
                                            value={followupcheck} type="checkbox" onchange={handleFollowUpChange}
                                            checked={followupcheck}>
                                        </lightning-input>
                                    </lightning-layout-item>
                                    <lightning-layout-item size=12 class="slds-m-top_small">
                                        <lightning-textarea label="Notes" value={inputNoteValue}
                                            onchange={handleNoteChange}>
                                        </lightning-textarea>
                                    </lightning-layout-item>
                                    <lightning-layout-item size=12 class="slds-m-top_small">
                                        <lightning-button onclick={handlesave} label="Save And Continue" variant="brand"
                                            style="float: right;">
                                        </lightning-button>
                                        <template if:true={isLoaded}>
                                            <lightning-spinner style="height: 27rem;margin-top: 8rem;" variant="brand"
                                                alternative-text="Loading Tasks" size="medium">
                                            </lightning-spinner>
                                        </template>
                                    </lightning-layout-item>
                                </lightning-layout>
                            </template>
                            <template if:false={showActivity}>
                                <h1 style="color: red;">Please select activity to proceed</h1>
                            </template>
                        </lightning-tab>
                    </lightning-tabset>
                </div>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open" style="height: 100rem;"></div>
    </template>
</template>

CSS

.slds-modal__container {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
 }

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    table { 
        width: 100%; 
    }

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }
    
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    tr { border: 2px solid rgb(176 173 171); }
    
    td { 
        /* Behave  like a "row" */
        border: none;
        /*border-bottom: 1px solid #eee; */
        position: relative;
        padding-left: 30%; 
    }

    td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        /* Label the data */
        content: attr(data-column);
        border-color: darkgrey !important;
        color: #000;
        font-weight: bold;
    }

}
0
hellraizer 17 Июн 2021 в 20:05
Есть идеи по этому вопросу?
 – 
hellraizer
18 Июн 2021 в 14:36

1 ответ

Что ж, у меня была та же проблема, и я думаю, что это правильный способ работы модального окна на мобильном телефоне, если мы думаем, что мне мало, если модальное окно не открывается вверху, оно может открываться за пределы экрана.

В любом случае, чтобы решить проблему в моем проекте, я удалил модальное окно с мобильного устройства, используя форм-фактор, я отображаю модальное содержимое непосредственно на текущем компоненте вместо модального.

Дайте мне знать, если поможет.

Отношении

0
Elivelton Walter 25 Окт 2021 в 23:02