te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>html - Modal not hiding properly after using buttons - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>html - Modal not hiding properly after using buttons - Stack Overflow

    html - Modal not hiding properly after using buttons - Stack Overflow

    programmeradmin3浏览0评论

    I have a modal:

    <ng-template #AllNewsModal>
<div class="card start-news" id="START_NEWS_MODULE">
    <div class="card-header">
        <div class="card-title">
            <span>{{ "Start.News" | translate }} </span>
            <span class="badge badge-secondary ml-1" *ngIf="news_modal && news_modal.UnreadCnt > 0">{{ news_modal.UnreadCnt }}</span>
            <app-tip class="mr-1 pull-right" id="START_NEWS"></app-tip>
        </div>
    </div>
    <div class="modal-body pb-0" [ngStyle]="{ 'overflow-y': !ShowMessageMode_modal ? 'hidden' : 'auto' }" *ngIf="!ShowMessageMode_modal">
        <span class="font-set3">{{ "Start.NewsDescription" | translate }}</span>
        <button type="button" class="close" (click)="CloseModal()">
            <span>&times;</span>
        </button>
    </div>
    <div class="modal-body pb-0" *ngIf="ShowMessageMode_modal && news_sel_modal && news_sel_modal.Title">
        <span class="font-set3"> {{news_sel_modal.Title}}</span>
        <div class="text-success pull-right" *ngIf="news_sel_modal.PublicationDate">
            {{ news_sel_modal.PublicationDate | date: State.FmtDate }}
        </div>
        <div class="text-success pull-right" *ngIf="!news_sel_modal.PublicationDate">
            {{ news_sel_modal.Created | date: State.FmtDate }}
        </div>
    </div>
    <hr class="mb-0" />
    <div class="modal-body pt-0" style="max-height: 70vh;">
        <div *ngIf="!ShowMessageMode_modal && news_modal && news_modal.Pubs">
            <ul class="list-group list-group-flush">
                <li class="list-group-item clickable px-0" *ngFor="let i of news_modal.Pubs" (click)="ShowMessage(i, true)">
                    <div class="pull-right text-success">
                        <div *ngIf="i.PublicationDate" class="ml-2 mb-2">
                            <i class="fa fa-fw fa-dot-circle-o" *ngIf="!i.IsRead"></i>
                            {{ i.PublicationDate | date: State.FmtDate }}
                        </div>
                        <div *ngIf="!i.PublicationDate" class="ml-2 mb-2">
                            <i class="fa fa-fw fa-dot-circle-o" *ngIf="!i.IsRead"></i>
                            {{ i.Created | date: State.FmtDate }}
                        </div>
                    </div>
                    <div class="text-justify" [innerHtml]="i.Content.ShortHtml"></div>
                </li>
            </ul>
            <div class="modal-footer d-flex justify-content-between">
                <button type="button" (click)="ViewAllNews(true, false)" class="btn btn-outline px-0 color-light70-graphite" [ngStyle]="{'visibility': news_page > 0 ? 'visible' : 'hidden'}">
                    <i class="fa fa-fw fa-arrow-left"></i>
                    {{ "Button.Back" | translate }}
                </button>
                <button type="button" (click)="ViewAllNews(true)" class="btn btn-outline px-0 color-light70-graphite" [ngStyle]="{'visibility': !no_next ? 'visible' : 'hidden'}">
                    <i class="fa fa-fw fa-arrow-right"></i>
                    {{ "Button.Next" | translate }}
                </button>
            </div>
        </div>
        <div class="modal-body px-0 pb-0" *ngIf="ShowMessageMode_modal && news_sel_modal">
            <div class="text-justify" [innerHtml]="news_sel_modal.Content.ContentHtml"></div>
            <hr />
        </div>
    </div>
    <div class="modal-footer" *ngIf="ShowMessageMode_modal && news_sel_modal">
        <button type="button" (click)="HideMessage(true)" class="btn btn-outline px-0 color-light70-graphite">
            <i class="fa fa-fw fa-arrow-left"></i>
            {{ "Button.Back" | translate }}
        </button>
    </div>
</div>

    With a simple close function (tried directly with 'modal_all_news.hide() but to no avail either).

        public CloseModal(){
     let t = this;
     t.modal_all_news.hide();
    }

    And if I close my modal right after opening it closes properly.

    But if I had used Back or Next buttons it would highlight those buttons instead (depending which one was pressed last) like that:

    Next highlighted on Close (x) press

    Back highlighted on Close (x) press

    What's funny is that the modal will close after i press outside of it enough times. The number of times depends on the number of button clicks I had done before I tried to exit. (for example I had pressed Next 1 time and had to press outside of the modal 3 times for it to disappear completely; 2 times made me press 5 times outside the modal).

    Modal is being displayed after clicking on page:

        <div class="card-header">
    <div class="card-title">
        <span (click)="ViewAllNews(true, false, true)">{{ "Start.News" | translate }} </span>
        <span class="badge badge-secondary ml-1" *ngIf="news && news.UnreadCnt > 0">{{ news.UnreadCnt }}</span>
        <app-tip class="mr-1 pull-right" id="START_NEWS"></app-tip>
    </div>
</div>

    by invoking this function:

    public ViewAllNews(modal: boolean = false, forward: boolean = true, initial: boolean = false) {
    let t = this;
    let pageSize = 1;

    if(initial){
        t.news_page = 0;
        t.no_next = false;
    }

    if(modal){
        if(forward){
            t.news_page++;
        } else {
            if(t.news_page > 0){
                t.news_page--;
            }
        }
    }

    let req = <GetNewsReq>{
        AccountId: t.State.CurrentUser.Id,
        PageSize: modal ? pageSize + 1 : 3,
        SkipFirst: modal ? pageSize*t.news_page : 0
    };
    
    // get additional items
    t.State.StartWorking();
    t.http.post<GetNewsRes>(environment.BaseApiUrl + "api/Publication/GetNews", req).subscribe(res => {
        if (res) {
            t.news_modal = res;
            t.modal_all_news = t.modal_srv.show(t.modal_template_all_news, {
                class: "modal-dialog modal-dialog-scrollable modal-lg"
            });

            if(modal){
                if(forward){
                    if(res.Pubs.length <= pageSize) {
                        t.no_next = true;
                    } else {
                        res.Pubs.pop();
                    }
                } else {
                    t.no_next = false;
                    res.Pubs.pop();
                }
            }
            
        } else {
            // TODO: display error
        }
    });
    
}

    I have a modal:

    <ng-template #AllNewsModal>
<div class="card start-news" id="START_NEWS_MODULE">
    <div class="card-header">
        <div class="card-title">
            <span>{{ "Start.News" | translate }} </span>
            <span class="badge badge-secondary ml-1" *ngIf="news_modal && news_modal.UnreadCnt > 0">{{ news_modal.UnreadCnt }}</span>
            <app-tip class="mr-1 pull-right" id="START_NEWS"></app-tip>
        </div>
    </div>
    <div class="modal-body pb-0" [ngStyle]="{ 'overflow-y': !ShowMessageMode_modal ? 'hidden' : 'auto' }" *ngIf="!ShowMessageMode_modal">
        <span class="font-set3">{{ "Start.NewsDescription" | translate }}</span>
        <button type="button" class="close" (click)="CloseModal()">
            <span>&times;</span>
        </button>
    </div>
    <div class="modal-body pb-0" *ngIf="ShowMessageMode_modal && news_sel_modal && news_sel_modal.Title">
        <span class="font-set3"> {{news_sel_modal.Title}}</span>
        <div class="text-success pull-right" *ngIf="news_sel_modal.PublicationDate">
            {{ news_sel_modal.PublicationDate | date: State.FmtDate }}
        </div>
        <div class="text-success pull-right" *ngIf="!news_sel_modal.PublicationDate">
            {{ news_sel_modal.Created | date: State.FmtDate }}
        </div>
    </div>
    <hr class="mb-0" />
    <div class="modal-body pt-0" style="max-height: 70vh;">
        <div *ngIf="!ShowMessageMode_modal && news_modal && news_modal.Pubs">
            <ul class="list-group list-group-flush">
                <li class="list-group-item clickable px-0" *ngFor="let i of news_modal.Pubs" (click)="ShowMessage(i, true)">
                    <div class="pull-right text-success">
                        <div *ngIf="i.PublicationDate" class="ml-2 mb-2">
                            <i class="fa fa-fw fa-dot-circle-o" *ngIf="!i.IsRead"></i>
                            {{ i.PublicationDate | date: State.FmtDate }}
                        </div>
                        <div *ngIf="!i.PublicationDate" class="ml-2 mb-2">
                            <i class="fa fa-fw fa-dot-circle-o" *ngIf="!i.IsRead"></i>
                            {{ i.Created | date: State.FmtDate }}
                        </div>
                    </div>
                    <div class="text-justify" [innerHtml]="i.Content.ShortHtml"></div>
                </li>
            </ul>
            <div class="modal-footer d-flex justify-content-between">
                <button type="button" (click)="ViewAllNews(true, false)" class="btn btn-outline px-0 color-light70-graphite" [ngStyle]="{'visibility': news_page > 0 ? 'visible' : 'hidden'}">
                    <i class="fa fa-fw fa-arrow-left"></i>
                    {{ "Button.Back" | translate }}
                </button>
                <button type="button" (click)="ViewAllNews(true)" class="btn btn-outline px-0 color-light70-graphite" [ngStyle]="{'visibility': !no_next ? 'visible' : 'hidden'}">
                    <i class="fa fa-fw fa-arrow-right"></i>
                    {{ "Button.Next" | translate }}
                </button>
            </div>
        </div>
        <div class="modal-body px-0 pb-0" *ngIf="ShowMessageMode_modal && news_sel_modal">
            <div class="text-justify" [innerHtml]="news_sel_modal.Content.ContentHtml"></div>
            <hr />
        </div>
    </div>
    <div class="modal-footer" *ngIf="ShowMessageMode_modal && news_sel_modal">
        <button type="button" (click)="HideMessage(true)" class="btn btn-outline px-0 color-light70-graphite">
            <i class="fa fa-fw fa-arrow-left"></i>
            {{ "Button.Back" | translate }}
        </button>
    </div>
</div>

    With a simple close function (tried directly with 'modal_all_news.hide() but to no avail either).

        public CloseModal(){
     let t = this;
     t.modal_all_news.hide();
    }

    And if I close my modal right after opening it closes properly.

    But if I had used Back or Next buttons it would highlight those buttons instead (depending which one was pressed last) like that:

    Next highlighted on Close (x) press

    Back highlighted on Close (x) press

    What's funny is that the modal will close after i press outside of it enough times. The number of times depends on the number of button clicks I had done before I tried to exit. (for example I had pressed Next 1 time and had to press outside of the modal 3 times for it to disappear completely; 2 times made me press 5 times outside the modal).

    Modal is being displayed after clicking on page:

        <div class="card-header">
    <div class="card-title">
        <span (click)="ViewAllNews(true, false, true)">{{ "Start.News" | translate }} </span>
        <span class="badge badge-secondary ml-1" *ngIf="news && news.UnreadCnt > 0">{{ news.UnreadCnt }}</span>
        <app-tip class="mr-1 pull-right" id="START_NEWS"></app-tip>
    </div>
</div>

    by invoking this function:

    public ViewAllNews(modal: boolean = false, forward: boolean = true, initial: boolean = false) {
    let t = this;
    let pageSize = 1;

    if(initial){
        t.news_page = 0;
        t.no_next = false;
    }

    if(modal){
        if(forward){
            t.news_page++;
        } else {
            if(t.news_page > 0){
                t.news_page--;
            }
        }
    }

    let req = <GetNewsReq>{
        AccountId: t.State.CurrentUser.Id,
        PageSize: modal ? pageSize + 1 : 3,
        SkipFirst: modal ? pageSize*t.news_page : 0
    };
    
    // get additional items
    t.State.StartWorking();
    t.http.post<GetNewsRes>(environment.BaseApiUrl + "api/Publication/GetNews", req).subscribe(res => {
        if (res) {
            t.news_modal = res;
            t.modal_all_news = t.modal_srv.show(t.modal_template_all_news, {
                class: "modal-dialog modal-dialog-scrollable modal-lg"
            });

            if(modal){
                if(forward){
                    if(res.Pubs.length <= pageSize) {
                        t.no_next = true;
                    } else {
                        res.Pubs.pop();
                    }
                } else {
                    t.no_next = false;
                    res.Pubs.pop();
                }
            }
            
        } else {
            // TODO: display error
        }
    });
    
}
    • html
    • angular
    • typescript
    • modal-dialog
    Share Improve this question edited Feb 17 at 13:57 jonrsharpe 122k30 gold badges267 silver badges474 bronze badges asked Feb 17 at 13:50 ÅrtørÅrtør 215 bronze badges
    Add a comment  | 

    1 Answer 1

    Reset to default 1

    I'm dumb and I apologize for wasting your time.

    The moment I wrote this I've realized I had been initializing a new modal each time I pressed a button (Next - Back).

            if (res) {

                if(initial){
                t.modal_all_news = t.modal_srv.show(t.modal_template_all_news, {
                    class: "modal-dialog modal-dialog-scrollable modal-lg"
                });
            }
            t.news_modal = res;

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论