为什么模态显示而不调用它?

Why modal shows withut calling it?

我在 HTML 中有一个模式,我想在单击按钮后切换它,但我无法让它工作。模态内容出现在主视图中,并且不会切换。

    <a href="#myModall" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModall" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

以上代码摘自 this 实际有效的教程!

P.S。我不想重新加载 HTML 以切换模式,因为我有一些值,我会丢失它们。

编辑:

<head>
<title>Add 

devices</title>
    <link rel="stylesheet" type="text/css" href="../style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


    <?php if ($show_modal) : ?>
        <script>
            $(document).ready(function() {
                $("#myModal").modal('show');
                $('#modalTable').DataTable({
                    searching: true,
                    paging: true,
                    info: true
                });
            });
        </script>
    <?php endif; ?>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("select.device_type_id").change(function() {
                var selectedType = $(this).children("option:selected").val();
                window.Var1 = selectedType;
                //  alert("You have selected the type id - " + selectedType);
                $.ajax({
                    url: "./createDevice.php",
                    method: "POST",
                    data: {
                        unit: selectedType
                    },
                    dataType: "text",
                    success: function(html) {
                        $('#confirmation').html(html);
                    }
                });
            });
        });
    </script>

    <script>
        function pageRedirect() {
            if (window.Var1 == null || window.Var1 == 'Select') {
                alert("Your forgot to choose device type!");
            } else {
                window.location.href = "add_devices_ble.php";
            }
        }
    </script>

</head>

<body>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <a href="#myModall" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

    <!-- Modal -->
    <div id="myModall" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Modal header</h3>
        </div>
        <div class="modal-body">
            <p>One fine body…</p>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>
        </div>
    </div>

</body>

您的示例页面似乎没有为 bootstrap 加载必要的 css 和 javascript 文件。请记住 bootstrap css 文件可以帮助您完成大部分工作,但是一旦您开始添加下拉菜单、导航栏和模式,您还需要 javascript。 https://getbootstrap.com/docs/4.5/getting-started/introduction/ 用于加载 cdns。