zoukankan      html  css  js  c++  java
  • Bootstrap模态框垂直高度居中问题

      Bootstrap对话框改变其默认宽高,高度不会自适应居中。为解决这个问题,最好的方式是能够通过css来解决,试了几种网上的方案发现都不行。然后想到可以通过js来修正,什么时候修正最好?于是想到可以注册全局的事件。

      下表是Bootstrap官方的事件。

    Event TypeDescription
    show.bs.popover This event fires immediately when the show instance method is called.
    shown.bs.popover This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).
    hide.bs.popover This event is fired immediately when the hide instance method has been called.
    hidden.bs.popover This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).
    inserted.bs.popover This event is fired after the show.bs.popover event when the popover template has been added to the DOM.
    Copy
    $('#myPopover').on('hidden.bs.popover', function () {
      // do something…
    })

      但是,我使用的是$(aa).modal('show'),所以改成这样:
      
    $(function () {
        //修正modal弹窗高度不能自适应的问题
        $('body .modal').on('show.bs.modal', function () {
            var $cur = $(this);
            $cur.css("top", ($(window).height() - $cur.height()) / 2);
        });
    });
    

      

     
  • 相关阅读:
    vue 前端框架 (二) 表格增加搜索
    vue 前端框架
    数据结构-树的基本操作
    linux的串口驱动分析
    TTY驱动程序架构
    linux MTD系统解析(转)
    DM9000网卡的基本工作原理
    ok6410的LCD裸机范例
    ok6410的DMA裸机总结
    ok6410串口裸机总结
  • 原文地址:https://www.cnblogs.com/skybreak/p/6774433.html
Copyright © 2011-2022 走看看