Модальное окно с серым фоном не исчезает - PullRequest
Новая
       7

Модальное окно с серым фоном не исчезает

0 голосов
/ 29 ноября 2018

У меня проблема с тем, что серый фон модального окна не исчезает, когда я нажимаю кнопку «Отмена».Ни одна из следующих опций не помогла мне:

  • Не делать положение контейнера для модала не фиксированным.Проблема в том, что мой модал не находится ни в одном контейнере.
  • $('#snapshotModal').modal().remove(); $('.modal-backdrop').remove(); Он удаляет фон, но модал работает не так, как ожидалось (В первый раз все хорошо, но когда мы закрываем и пытаемся открыть модалво второй раз, это дает исключение, что canvas равно нулю)
  • $('#snapshotModal').modal('hide'); не работает вообще (даже не закрывает модальное)

I 'добавив код ниже.Спасибо за все ваши ответы!

CameraStreamView.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>

SnapshotModalView.cshtml 

<div class="modal-dialog">
    <div id="modalContent" class="modal-content">
        <canvas id="canvas" class="canvas"></canvas>
        <div id="modalFooter" class="modal-footer">
        </div>
    </div>
</div>
...