概要

JavaScriptでお手軽にフローティングウィンドウを表示する方法を紹介します
独立したライブラリなのでjQuery等への依存はありません。
拙作ライブラリの新機能（ウィンドウの開閉アクションなど）の紹介となります

(https://riversun.github.io/jsframe/examples/v150/preset_yosemite_auto.html)

yosemite風フローティングウィンドウを表示する

index.html(フローティングウィンドウを表示する)

<!DOCTYPE html>
<html>
<head>
    <title>JsFrame.js JavaScript Yosemite</title>
    <meta charset="utf-8">
</head>
<body style="background: url('http://upload.wikimedia.org/wikipedia/commons/d/d6/Half_Dome_from_Glacier_Point%2C_Yosemite_NP_-_Diliff.jpg') 50% no-repeat fixed; background-size: cover;">
<script src="https://riversun.github.io/jsframe/jsframe.js"></script>

<script>
        const jsFrame = new JSFrame();//jsFrameオブジェクトを作る
        const frames = [];
        for (let i = 0; i < 3; i++) {
            const frame = jsFrame.create({
                name: `Win${i}`,
                title: `Win${i} - Yosemite style`,
                left: 20 + (320 + 20) * i, top: 50, width: 320, height: 220, minWidth: 200, minHeight: 110,
                appearanceName: 'yosemite',//プリセット名 yosemite を指定
                style: {
                    backgroundColor: 'rgba(255,255,255,0.8)', //背景色は半透明に
                    overflow:'auto'
                },
                //ココに表示したいHTMLを直接設定するか、 url:'' でurl指定するとその内容をiframeで表示
                html: '<div style="padding:10px;">Your contents here.</div>'
            }).show();

            frame.setControl({
                styleDisplay:'inline',
                maximizeButton: 'zoomButton',
                demaximizeButton: 'dezoomButton',
                minimizeButton: 'minimizeButton',
                deminimizeButton: 'deminimizeButton',
                hideButton: 'closeButton',
                animation: true,
                animationDuration: 150,

            });
            frame.control.on('hid', (frame, info) => {
                frame.closeFrame();
            });
            frames.push(frame);
        }
        frames[0].requestFocus();
</script>
</body>
</html>

デモ
https://riversun.github.io/jsframe/examples/v150/preset_yosemite_auto.html

見た目を変更した例
https://riversun.github.io/jsframe/examples/v150/preset_material.html

まとめ

見た目はカスタムできるので、ちょっとしたポップアップ用途から、本格的！？マルチウィンドウアプリまで作成可能です。
（が、カスタムが面倒という声をいただいたので、いくつかプリセットを内蔵しました、今回のもその1つとなります）
ライブラリ自体はこちら「フローティング・ウィンドウライブラリ JSFrame.js の紹介」で紹介しています。

JavaScriptでフローティングウィンドウを表示する方法

概要

yosemite風フローティングウィンドウを表示する

まとめ