Question

我有一个问题，当我按下“取消”按钮时，模态窗口的灰色背景不会消失。以下选项均无济于事：

使模态容器的位置不固定。问题是我的模态不在任何容器中。
$('#snapshotModal').modal().remove(); $('.modal-backdrop').remove();会删除背景，但是模式不能按预期工作（第一次一切都很好，但是当我们第二次关闭并尝试打开模式时，它给出了一个例外，{{1 }}为空）
canvas根本不起作用（甚至不会关闭模式）

我要添加以下代码。感谢您的所有回答！

CameraStreamView.cshtml

$('#snapshotModal').modal('hide');

SnapshotModalView.cshtml

<style>
    .myVideo {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        min-width: 50%;
        min-height: 50%;
    }

    .child {
        left: 50%;
        position: absolute;
        top: 80%;
        transform: translate(-50%, -50%);
    }

    .myButton {
        background: url(../../img/camera.png) no-repeat;
        cursor: pointer;
        border: none;
        width: 100px;
        height: 100px;
    }

        .myButton:active /* use Dot here */ {
            background: url(../../img/camera.png) no-repeat;
        }

    .canvas {
        width: 30%;
        height: 30%;
        background-color: white;
        z-index: 10;
        display: block;
    }
</style>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Film a person</title>
</head>

<body onload="start()" onunload="stop()">
    <div class="container">
        <video id="video" class="myVideo" style="display: block; margin: 0 auto; margin-top: 30px;" autoplay></video>
        <input id="button" class="child myButton" value="">
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="~/Scripts/GetCameraFeed.js"></script>
    <script>
        var img;

        $('#button').on('click', function () {
            $('#snapshotModal').appendTo("body").modal('show');
            var canvas = document.getElementById('canvas');
            canvas.width = 200;
            canvas.height = 200;
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
            img = canvas.toDataURL();
            $('#modalContent').append('<input id="analyzePictureButton" style="display: block;" type="submit" value="Analyze picture"/>');
            $('#modalFooter').append('<button class="btn btn-primary" data-dismiss="modal" id="closeButton">Cancel</button>');

            $('#analyzePictureButton').on('click', function () {
                $.ajax({
                    url: '/CameraStream/CaptureSnapshot',
                    type: 'POST',
                    dataType: "json",
                    data: { 'imgBase64': JSON.stringify(img) },
                    success: function (data) {
                        alert(data.result);
                    },
                    error: function () {
                        alert("An error occured while analyzing picture");
                    }
                });

            });
            $('#closeButton').on('click', function () {
                $('#snapshotModal').modal('hide');
            });


        });

    </script>

    <div id="snapshotModal" class="modal fade" role="dialog" data-url="@Html.Action("SnapshotModalView", "CameraStream")"></div>

</body>
</html>

模态窗口灰色背景不会消失

0 个答案: