0

画像をクリックするとポップアップするポップアップでビデオを表示しようとしています。ポップアップを閉じようとすると、右上隅にある「X ボタン」が表示され、ポップアップが閉じて再度開くことはありませんが、オーディオはバックグラウンドで再生されます。コードは次のようになります。

<script>
    function CreatePopup() {
    //create a div for the popup
    var $popUp = $("<div/>").popup({
    id : "pop1",
    dismissible : false,
    theme : "a",
    overlyaTheme : "a",
    transition : "pop",
    position : "origin"
    });

    //create a title for the popup
    $("<h2/>", {
    text : "Video Feed"
    }).appendTo($popUp);
    $("<a/>", {
    id : "cls",
    href : "#",
    "data-rel" : "back",
    "data-role" : "button",
    "data-theme" : "a",
    "data-icon" : "delete",
    "data-iconpos" : "notext",
    "data-transition" : "flip",
    "class" : "ui-btn-right",
    text : "Close"
    }).appendTo($popUp).bind("click", (function() {
    RemovePopup();
    }));
    $("<iframe/>", {
    id : "ifr",
    src : "media/sap.mp4",
    width : "200px",
    height : "200px"
    }).appendTo($popUp);
    $popUp.popup("open").trigger("create");
    }
    function RemovePopup() {

    //$("#ifr").remove();
        $("#pop1").empty();
    $("#pop1").popup("close");

    }

    $(function() {
        $("#img1").click(function() {
        CreatePopup();
            });
    });
</script>

HTML は次のとおりです。

<body>
    <div>
        <img src="images/supermarket.jpg" style="width: 600; height: 500; float: left; display: inline; margin-left: 200px;">

        <a id="g1c1" href="#pop1" style="position: absolute;top:191px;left:334.28125px;" data-rel="popup" data-inline="true" data-transition="popup" data-mini="true"> <img id="img1" src="images/cctvcam.jpg"> </a>
    </div>

</body>

そこから解決策を見つけるのを手伝ってください。

4

0 に答える 0