[bootstrap]如何使用modal

作为一个弹窗框,我这里选用modal组件

​​https://getbootstrap.com/docs/4.0/components/modal/​​

在进入页面的时候就判断是否是IE进行加载

<div class="modal bootstrap" id="modal_custom" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Browser not support</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                    onclick="closeDialog()">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <p>To have better performance, please use Chrome or Safa browse the website</p>
            </div>
        </div>
    </div>
</div>

<script>
        window.onload = function(){
            detectIE()
        }
        function detectIE(){
            if (window.navigator && window.navigator.msSaveOrOpenBlob){
                console.log('is IE')
                openDialog()
            }else{
                console.log('not IE')
                $("#modal_custom .close").click();
            }
        }
        function openDialog(){
            $('#modal_custom').modal({
                show: true,
                focus:true
            })
        }
         function closeDialog(){
            $('#modal_custom').modal({
                backdrop: true
            })
        }

    </script>

<style>
        @media(min-width: 1025px){
            .modal{
                z-index: 100;
                position: relative;
                left: 900px;
                top: 850px;
                width: 500px;
            }
        }
        .modal-dialog{
            width: 500px;
        }
        .modal-content{
            background: #279643 !important;
        }
        .modal-header{
            border-bottom: none !important;
        }
        .modal-body,.modal-title{
            color: white !important;
        }
        @media (max-width: 767px) and (max-width: 1024px){
            .modal{
                z-index: 100;
                position: relative;
                top: 780px;
                width: 500px;
            }
        }
    </style>

组件使用起来也比较简洁,但是如果要调到自己合适的css也是比较费工夫

其次有几个麻烦点:

1. 组件控制

2. div留白

一. 组件控制里打开关闭都一目了然,但是如何在浏览器判断的时候进行隐藏呢,直接调用close的方法是无效的

参考链接: ​​https://stackoverflow.com/questions/10466129/how-to-hide-bootstrap-modal-with-javascript​​

$("#MyModal .close").click();

这里采用手动调用click方法然后close掉modal

二. div留白

有很多人遇到这个问题: ​​https://stackoverflow.com/questions/5229081/positionrelative-leaves-an-empty-space​​

但是解决办法都不太好

后来改变了一下<div>的布局

把

<div class="modal boostrap" ...>

的boostrap提出来,因为这样写,没有继承到bootstrap的css

重新布局如下

<div class="bootstrap">
    <div class="modal" ...>
</div>

可以清除了空白,但是modal没有显示,需要手动配置display: block显示

使用js操作.click()性能很慢,加上由于要检测到IE才显示,索性不用一开始就显示然后关掉,只需要是IE才显示(display: block),正常就display: none

通过js来控制css

完整代码如下:

<div class="bootstrap">
    <div class="modal" id="modal_custom" tabindex="-1" role="dialog" style="display: block;">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Browser not support</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            onclick="closeDialog()">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>To have better performance, please use Chrome or Safa browse the website</p>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        window.onload = function () {
            detectIE()
        }

        function detectIE() {
            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                console.log('is IE')
                openDialog()
            } else {
                console.log('not IE')
            }
        }

        function openDialog() {
            var obj = document.getElementById("modal_custom");
            obj.style.display= "block";
        }

        function closeDialog() {
            $('#modal_custom').modal({
                backdrop: true
            })
        }

    </script>
@endpush

@push('style')
    <style>
        @media (min-width: 1025px) {
            .bootstrap .modal {
                left: 62% !important;
                top: 70% !important;
                height: fit-content !important;
                width: fit-content !important;
            }
        }

        .modal-dialog {
            width: 500px;
        }

        .modal-content {
            background: #279643 !important;
        }

        .modal-header {
            border-bottom: none !important;
        }

        .modal-body, .modal-title {
            color: white !important;
        }

        @media  (max-width: 1024px) {
            .bootstrap .modal {
                top: 70% !important;
                width: fit-content !important;
                height: fit-content !important;
            }
        }
        {{--for ipad--}}
        @media  (min-width: 768px) and (max-width: 1024px) {
            .bootstrap .modal {
                top: 70% !important;
                left: 40% !important;
                width: auto !important;
                height: auto !important;
            }
        }
    </style>
@endpush

参考:

1. 如何关闭modal: ​​https://stackoverflow.com/questions/16493280/close-bootstrap-modal​​