Bootstrap 4 модальный не работает после запуска - PullRequest
Новая
       81

Bootstrap 4 модальный не работает после запуска

0 голосов
/ 04 октября 2019

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

Я пробовал использовать разные CDN, повторное использование кода из Интернета, но ничего не получалось. Когда я пытаюсь какой-нибудь другой загрузчик, cdn портит мой css и все идет не так. Может кто-нибудь, пожалуйста, скажите мне, как и что делать. 

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" type="image/png" href="image/icons/h2d_color.ico" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://kit.fontawesome.com/b9f85d60dc.js" crossorigin="anonymous"></script>
        <script src="jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

</head>
<body>
                <a data-toggle="modal" data-target="#myModal" href="#myModal">
                    <div class="col-xs-3 cards-item cardTipove">
                        <div class="cardsHeading">
                            <h2>ТИПОВЕ</h2>
                        </div>
                    </div>
                </a>

</body>
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <a href="projector.html" class="cardsLink">
                            <div class="col-xs-3 cards-item cardProjector">
                                <div class="cardsHeading">
                                    <h2>ПРОЖЕКТОР</h2>
                                </div>
                            </div>
                        </a>
                        <a href="generator.html" class="cardsLink">
                            <div class="col-xs-3 cards-item cardGenerator">
                                <div class="cardsHeading">
                                    <h2>ГЕНЕРАТОР/МАНИФЕСТИРАЩ ГЕНЕРАТОР</h2>
                                </div>
                            </div>
                        </a>
                        <a href="manifestor.html" class="cardsLink">
                            <div class="col-xs-3 cards-item cardManifestor">
                                <div class="cardsHeading">
                                    <h2>МАНИФЕСТОР</h2>
                                </div>
                            </div>
                        </a>
                        <a href="reflector.html" class="cardsLink">
                            <div class="col-xs-3 cards-item cardReflector">
                                <div class="cardsHeading">
                                    <h2>РЕФЛЕКТОР</h2>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

он должен показывать мой модал, но ничего не происходит

1 Ответ

2 голосов
/ 04 октября 2019

Вам необходимо включить файл boostrap.js 

<head>
    ....
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>

https://jsfiddle.net/bzon481d/

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" type="image/png" href="image/icons/h2d_color.ico" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://kit.fontawesome.com/b9f85d60dc.js" crossorigin="anonymous"></script>
    <script src="jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</head>

<body>
    <a data-toggle="modal" data-target="#myModal" href="#myModal">
        <div class="col-xs-3 cards-item cardTipove">
            <div class="cardsHeading">
                <h2>ТИПОВЕ</h2>
            </div>
        </div>
    </a>

</body>
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <a href="projector.html" class="cardsLink">
                            <div class="col-xs-3 cards-item cardProjector">
                                <div class="cardsHeading">
                                    <h2>ПРОЖЕКТОР</h2>
                                </div>
                            </div>
                        </a>
                        <a href="generator.html" class="cardsLink">
                            <div class="col-xs-3 cards-item cardGenerator">
                                <div class="cardsHeading">
                                    <h2>ГЕНЕРАТОР/МАНИФЕСТИРАЩ ГЕНЕРАТОР</h2>
                                </div>
                            </div>
                        </a>
                        <a href="manifestor.html" class="cardsLink">
                            <div class="col-xs-3 cards-item cardManifestor">
                                <div class="cardsHeading">
                                    <h2>МАНИФЕСТОР</h2>
                                </div>
                            </div>
                        </a>
                        <a href="reflector.html" class="cardsLink">
                            <div class="col-xs-3 cards-item cardReflector">
                                <div class="cardsHeading">
                                    <h2>РЕФЛЕКТОР</h2>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
...