html要素をbusyにし、リンクなど選択できなくする、グレーアウト。jquery

2014年11月29日更新 view: 30 view
photoBy: http://www.planet-source-code.com/vb/2010Redesign…

リンクを無効にしたり有効にしたりするのは面倒

http://www.7-2.jp/try/jquery/a_disabled.html

リンクを有効、無効にする方法が色々あるみたいだが、全てうまく動かない。
じゃあ、リンクの上に要素を重ねて、リンクを押せなくしちゃおうってのが今回の方法。

html

<div id="overlay">

</div>
<a href="http://www.matomater.com">押せなくなるよ</a>

css

    #overlay{
        display: none;
        width: 100%;
        height:100%;
        text-align: center;
        position: fixed;
        top: 0;
        z-index: 100;
        background: rgba(0,0,0,0.7);
    }

javaxscript

スポンサードリンク
$("#overlay").fadeIn(); /*ふわっと表示*/
$("#overlay").fadeOut(); /*解除*/

昔は glayer.js などのライブラリを使う必要がありましたが、すっげー便利になりましたね。

スポンサードリンク

関連記事

関連カテゴリ