Bootstrap 模式未显示在 SVG 之上

Question

I am trying to have a bootstrap modal show when a button is clicked.我试图在单击按钮时显示引导模式。 The page is using an SVG since it needs to have visual paths/nodes.该页面使用 SVG，因为它需要具有可视路径/节点。 When the button is clicked the modal does not show up.单击按钮时，模态不会显示。 When using the page inside an iframe, however, the modal will show up.但是，在 iframe 内使用页面时，将显示模态。

Here is the code for the page in question:这是相关页面的代码：

<html>
<head>
    <link rel="stylesheet" href="mb.css" />
    <link rel="stylesheet" type="text/css" href="NEditor.css" />
    <link
        href="https://fonts.googleapis.com/css?family=Lato"
        rel="stylesheet"
    />
    <script src="Utilities.js"></script>
    <script src="NodeClasses.js"></script>
    <script src="NodeMethods.js"></script>

    <style>
        body {
            font-family: "Lato";
        }
    </style>
</head>
<body>
    <div
        class="btn-group"
        role="group"
        aria-label="Basic example"
        style="padding-top: 10px; padding-left: 5px;"
    >
        <button
            class="btn btn-primary"
            id="CommandBtn"
            style="background-color: #6c757d;"
            data-toggle="modal"
            data-target="#addCommand"
        >
            Add Command
        </button>
        <button
            class="btn btn-primary"
            id="ResponseBtn"
            style="background-color: #6c757d;"
        >
            Add Response
        </button>
        <button
            class="btn btn-primary"
            id="SaveBtn"
            style="background-color: #6c757d;"
        >
            Save Flow
        </button>
    </div>
    <div class="container-fluid" style="padding: 15px;">
        <svg id="connsvg"></svg>


    </div>
    <div class="modal fade" id="addCommand">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">New Command</h4>
                    <button
                        type="button"
                        class="close"
                        data-dismiss="modal"
                        aria-hidden="true"
                    >
                        ×
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="exampleInputPassword1"
                            >Command name</label
                        >
                        <input class="form-control" id="commandName" />
                    </div>
                </div>
                <div class="modal-footer">
                    <a
                        href="#"
                        data-dismiss="modal"
                        class="btn btn-secondary"
                        >Close</a
                    >
                    <a
                        class="btn btn-primary"
                        style="color: white;"
                        id="addCommandBtn"
                        data-dismiss="modal"
                        >Add</a
                    >
                </div>
            </div>
        </div>
    </div>
    <script
        src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"
    ></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        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>
</body>
<script>
    window.addEventListener("load", function(e) {
        loadNodesFromFile();
        loadNode();
        /* var n4 = new NEditor.Node("Compile Results");
        var n4i1 = n4.addInput("Input A");
        var n4i2 = n4.addInput("Input B");
        n4.setPosition(700, 180);

        var n3 = new NEditor.Node("Some Process");
        var n3i1 = n3.addInput("Input");
        var n3o1 = n3.addOutput("Output");
        n3.setPosition(300, 50);
        n3.setWidth(200);

        n3o1.connectTo(n4i2);

        var n2 = new NEditor.Node("Some Other Process");
        var n2i1 = n2.addInput("Input");
        var n2o1 = n2.addOutput("Output");
        n2.setPosition(300, 300);
        n2.setWidth(200);

        n2o1.connectTo(n4i1);

        var n1 = new NEditor.Node('"Help" command');
        var n1o1 = n1.addOutput("Response");
        n1.setPosition(50, 200);

        n1o1.connectTo(n2i1);
        n1o1.connectTo(n3i1); */
    });

    document.body.style.width = "2000px";
    document.body.style.height = "1000px";

    // #####################
    // SETUP UI
    // #####################
    //var commandButton = document.getElementById("CommandBtn");
    var saveButton = document.getElementById("SaveBtn");

    // Create new command node
    //commandButton.addEventListener("click", function() {});

    // Save the current flow state
    saveButton.addEventListener("click", function() {
        saveFlowState();
        location.href = "./index.html";
    });
</script>

The button with id CommandBtn is the one I am trying to use. id 为 CommandBtn 的按钮是我尝试使用的按钮。

Answer 1

 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <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"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html>

Bootstrap 模式未显示在 SVG 之上

问题描述

1 个解决方案

解决方案1
0 2019-11-25 10:18:04

Bootstrap 模式未显示在 SVG 之上

问题描述

1 个解决方案

解决方案1 0 2019-11-25 10:18:04

解决方案1
0 2019-11-25 10:18:04