Внутри начальной загрузки модальная прокрутка до определенного элемента не работает - PullRequest
Новая
       7

Внутри начальной загрузки модальная прокрутка до определенного элемента не работает

0 голосов
/ 07 января 2019

Я использовал boostrap modal.in, что нам нужно использовать прокрутку до определенного элемента. я попытался с помощью приведенного ниже кода. но не работает 

 $('#centralModalLg').on('show.bs.modal', function() {
        $( "#elementId" ).scrollTop(0);

   });

Обновлен:

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

enter image description here

при открытии модального второго раза. проклятие должно пойти на вершину, но я попал туда, где остановился в прошлый раз.

Html 

<div class="modal fade" id="centralModalLg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog" [ngClass]="{ 'modal-lg': productDetails?.imageUrl != null, 'modal-md': productDetails?.imageUrl == null}" role="document">
        <!--Content-->
        <div class="modal-content" *ngIf="productDetails">
            <div class="modal-body">

                <div class="row">
                    <div class="col-md-12">
                        <button *ngIf="productDetails.imageUrl != null" type="button" id="closeProductModal" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>

                        <h4>{{productDetails?.productName}}
                            <span>
                              <img *ngIf="!productDetails?.isVeg" alt="trending" class="w24" src="https://www.crashmeal.com/assets/images/icons/trending-m.png">
                            </span>
                            <span>
                                     <img  *ngIf="productDetails?.isVeg" alt="veg" class="w24" src="https://www.crashmeal.com/assets/images/icons/veg-m.png">
                             </span>
                        </h4>
                        <div id="elementId" class="over-flow-md">
                            <img *ngIf="productDetails.imageUrl != null" class="card-img-top" src="{{baseLogoUrl + productDetails?.imageUrl}}" alt="Thumbnail [100%x225]" style="height: 225px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16654384883%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16654384883%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.7265625%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                                data-holder-rendered="true">

                            <button *ngIf="productDetails.imageUrl == null" type="button" id="closeProductModal" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>



                            <!-- <hr /> -->

                            <p class="small pt-2">
                                {{ productDetails?.productDesc }}
                            </p>
                            <hr />
                            <div class="addons" *ngFor="let addonCate of productDetails?.addonsCategoryDataList;let addonIndex=index">
                                <h5 class="bg-light">{{addonCate.CategoryType}}</h5>
                                <div class="row pb-1">
                                    <div class="small col-12"><strong>{{addonCate?.addonsCategoryName}}({{addonCate?.addonsCategoryDesc}}) </strong>
                                        <span *ngIf="addonCate.addonType == 'required'" class="float-right pr-2 required">Required</span></div>
                                    <div id="errorElement" *ngIf="addonCate?.hasError" class="small col-12 form-error">{{addonCate?.errorMsg}}</div>

                                </div>
                                <ul class="list-group mb-3" *ngIf="addonCate?.maxNoOfSelection > 1 || addonCate?.maxNoOfSelection == null">
                                    <li class="list-group-item px-0 d-flex justify-content-between lh-condensed" *ngFor="let addonCateList of addonCate?.addonsCategoryEntries;let addoncateIndex=index">
                                        <div class="col-md-7 align-self">
                                            <label class="checkbox-inline checkbox">
                                                    <input class="form-check-input float-left mr-2" name="{{addonCateList.addonsCategoryEntryId}}" (change)="addOnAddRemove(addonIndex,addoncateIndex,addonCateList, $event,'checkbox')" [(ngModel)]="addonCateList.checkedValue"  type="checkbox"  value="option1" >
                                                    <span class="checkmark"></span>
                                                    <div class="checkbox-text">
                                                        <h6 class="my-0">{{addonCateList.addonsCategoryEntryName}}</h6>
                                                    </div>
                                                </label>
                                        </div>
                                        <div class="col-md-2 align-self text-right">
                                            $ {{addonCateList.addonsCategoryEntryPrice}}
                                        </div>
                                        <div class="col-md-3 addprice">
                                            <ng-container *ngIf="addonCateList.maxNoOfSelection > 1 || addonCateList.maxNoOfSelection == null">
                                                <button [disabled]="addonCateList.maxNoOfSelection == addonCateList.quantity" (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'add')" class="btn-addRemove float-right" type="button"> <i class="fa fa-plus small"></i> </button>
                                                <input class="form-control input-addRemove float-right" min="{{addonCateList.minNoOfSelection}}" max="{{addonCateList.maxNoOfSelection}}" name="addonCateList_qty" [(ngModel)]="addonCateList.quantity" readonly type="number" aria-label="number" />
                                                <button (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'sub')" class="btn-addRemove float-right" type="button"> <i class="fa fa-minus small"></i> </button>


                                                <span id="errorElement" *ngIf="addonCateList.hasError">{{addonCateList.errorMsg}}</span>
                                            </ng-container>
                                        </div>
                                    </li>
                                </ul>
                                <ul class="list-group mb-3" *ngIf="addonCate?.maxNoOfSelection == 1">
                                    <li class="list-group-item pr-0 d-flex justify-content-between lh-condensed" *ngFor="let addonCateList of addonCate?.addonsCategoryEntries;let addoncateIndex=index">
                                        <div class="col-md-7 align-self">
                                            <h6 class="my-0">{{addonCateList.addonsCategoryEntryName}}</h6>
                                            <input class="form-check-input" name="{{addonCate.CategoryType}}" (change)="addOnAddRemove(addonIndex,addoncateIndex,addonCateList, $event,'radio')" [checked]="addonCateList.checkedValue" type="radio">
                                        </div>
                                        <div class="col-md-2 align-self text-right">
                                            $ {{addonCateList.addonsCategoryEntryPrice}}
                                        </div>
                                        <div class="col-md-3 addprice">
                                            <ng-container *ngIf="addonCateList.maxNoOfSelection > 1 || addonCateList.maxNoOfSelection == null">
                                                <button [disabled]="addonCateList.maxNoOfSelection == addonCateList.quantity" (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'add')" class="btn-addRemove float-right" type="button"> <i class="fa fa-plus small"></i> </button>
                                                <input class="form-control input-addRemove float-right" min="{{addonCateList.minNoOfSelection}}" max="{{addonCateList.maxNoOfSelection}}" name="addonCateList_qty" [(ngModel)]="addonCateList.quantity" readonly type="number" aria-label="number" />
                                                <button (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'sub')" class="btn-addRemove float-right" type="button"> <i class="fa fa-minus small"></i> </button>


                                                <span id="errorElement" *ngIf="addonCateList.hasError">{{addonCateList.errorMsg}}</span>
                                            </ng-container>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="py-2">
                    <input class="form-control" name="specialInstr" [(ngModel)]="productDetails.specialInstr" type="text" placeholder="Add Special Instructions for the Restaurant">
                </div>
                <hr />
                <div class="row addprice">
                    <div class="price col-sm-7">Choose Quantity</div>
                    <div class="text-right col-sm-2 ">
                        <strong>{{outletDetials?.currency}}
                            <ng-container *ngIf="productDetails?.cost">{{productDetails.cost}}</ng-container>
                            <ng-container *ngIf="!productDetails?.cost || productDetails.cost == null">0</ng-container>
                        </strong>
                    </div>
                    <div class="text-right  col-sm-3 ">
                        <button class="btn-addRemove float-right" (click)="increase_decrease_qty(productDetails,'add')" type="button"> <i class="fa fa-plus small"></i> </button>
                        <input readonly class="form-control input-addRemove float-right ng-untouched ng-pristine ng-valid" aria-label="number" min="1" name="quantity" [(ngModel)]="productDetails.quantity" type="number">
                        <button class="btn-addRemove float-right" (click)="increase_decrease_qty(productDetails,'sub')" type="button"> <i class="fa fa-minus small"></i> </button>
                    </div>
                </div>

            </div>
            <div class="bg-light p-0 pb-2">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mt-3 pl-3">
                            <span class="pr-1">Total:</span>
                            <strong>{{outletDetials?.currency}}
                                        <ng-container *ngIf="productDetails?.totalPrice">{{productDetails.totalPrice}}</ng-container>
                                        <ng-container *ngIf="!productDetails?.totalPrice || productDetails.totalPrice == null">0</ng-container>
                                    </strong>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <button [disabled]="add_cart_loading == 'adding'" type="button" (click)="addProductToCart(productDetails)" class="btn btn-primary pull-right mt-2 mr-4">
                                    <span *ngIf="add_cart_loading != 'adding'">
                                      <ng-container *ngIf="!update_product_status"> Add to Cart </ng-container>
                                      <ng-container *ngIf="update_product_status">Update</ng-container>
                                    </span>
                                    <span *ngIf="add_cart_loading == 'adding'">
                                      <ng-container *ngIf="!update_product_status">Adding</ng-container>
                                      <ng-container *ngIf="update_product_status">Updating</ng-container>
                                      <i class="fa fa-spinner fa-spin"></i>
                                    </span>
                        </button>
                    </div>
                </div>

            </div>
        </div>
        <!--/.Content-->
    </div>
</div>

Как мне этого добиться

Заранее спасибо

Ответы [ 3 ]

0 голосов
/ 09 января 2019

попробуйте это: 

$('#centralModalLg').on('show.bs.modal', function() {

    setTimeout(function() {
    var $elem = $('#scrollto') // add this ID to an element you want scroll to
    var $container = $("#elementId")
    $container.scrollTop(0) // edge case - reset scroll in case it is reopened
    var t = $container.offset().top
    $container.scrollTop($elem.position().top - t);
    }, 500) // run after modal animation 
});

Основано на ответе: https://stackoverflow.com/a/21179878/8164758

Вот пример работы jsfiddle: https://jsfiddle.net/954jnt2y/1/

0 голосов
/ 09 января 2019

Измените "шоу" на "показано", когда вы использовали загрузчик 3 или 4 

$('#centralModalLg').on('shown.bs.modal', function() {
        $( "#elementId" ).scrollTop(0);
});

проверьте, что пример кодовой ручки Bootstrap 3

проверьте, что пример кодовой ручки Bootstrap 4

0 голосов
/ 09 января 2019 
$('#centralModalLg').on('shown.bs.modal', function() {
    $('#elementId').scrollTop(0); 
});

A Скрипка с вашим кодом.

EDIT: Проблема вызвана прослушивателем событий, должна быть said.bs.modal вместо show.bs.modal , также обновлена ​​скрипта.

jQuery.scrollTop () может конфликтовать, если событие запущено, но еще не завершено с официальной документацией Bootstrap :

инфинитив (например, шоу) запускается в начале события, и его предыдущая форма причастия (например, показанная) запускается по завершении действие.

...