0

私がやろうとしている芸術的なプロジェクトの一環として、閉じられないポップアップを実装したいと思います。クリックすると、ユーザーが必要なことをしない限り閉じることができないポップアップが開きます（この場合は、キャンバスに描画します）。クリックすると次のようなボタンが必要です: 1) ポップアップを閉じます。2) 図面をコンピュータに強制的にダウンロードします。

ポップアップを作成することができました（適切なサイズ、適切な配置など）。クリックするとポップアップを閉じるボタンも作成しました。ただし、ユーザーが隅にある赤い X をクリックしようとすると、ポップアップを維持できないようです...閉じられないポップアップは Chrome では実際には機能しないことに気付きましたが、それでも機能したいと思います私の芸術を理解するために不可欠であるため、理論的には閉じることができません。

ユーザーが自分の「描いたアート」を提出しない限り、戻ってくるようにするにはどうすればよいですか?

前もって感謝します！非常に感謝しています。コードが機能する場合は、間違いなくあなたの名前を付けます。

PS: キャンバスから図面を強制的にダウンロードするコードを誰かが知っていれば、それは非常にありがたいです。現在、右クリックする必要がある別のページにしか移動できません->画像を名前を付けて保存->など

ありがとう！:)

4

1 に答える 1

2

「閉じられない」ポップアップを実際に作成することはできません。ただし、ページ全体をライトボックスでオーバーレイすることはできます。概念実証として、jQuery の助けを借りてこれをまとめました。これは非常に初歩的で、かなりの名前空間/クリーンアップなどが必要です。http://jsfiddle.net/CJCQQ/

CSS:

#page-cover {
    background-color: #888; 
    display: none; 
    position: absolute; 
    width: 100%; 
    height: 100%
}
#uncloseable-lightbox {
    background-color: #000;
    height: 200px;
    position: absolute;
    left: 10px;
    top: 10px;
    width: 500px;
}
#uncloseable-lightbox button { position: absolute }
#uncloseable-lightbox #close-button { top: 10px; right: 10px;}
#uncloseable-lightbox #click-first-button { bottom: 10px; left: 10px;}

HTML:

<div id="page-cover">
    <div id="uncloseable-lightbox">
        <button id="close-button">close</button>
        <button id="click-first-button">Click Me First</button>
    </div>
</div>
<button id="open-button">Open</button>

JS:

$(document).ready(function () {
    var outerThis = this, canClose = false;
    $('#open-button').on('click', function (e) {
        e.preventDefault();
        $('#page-cover').show();
    });

    $('#close-button').on('click', function (e) {
        e.preventDefault();
        if(outerThis.canClose) {
            $('#page-cover').hide();
            outerThis.canClose = false;
        }
    });

    $('#click-first-button').on('click', function (e) {
        outerThis.canClose = true;
    });
});
于 2013-03-03T09:18:12.183 に答える