ポンクソフト

ブラウザ全体をブロックしてみる - jQuery入門

前ページ jQuery入門 TOP 次ページ

目次

  1. jQuery入門
  2. jQueryのインストール・簡単な使い方
  3. クイズゲームの作り方
  4. 秘密の暗号を作ってみよう(たぬき暗号)
  5. アクションゲームを作ってみよう(ぬりかべ)
  6. 画像を使ったジグソーパズルを作ってみよう
  7. もぐらたたきっぽいゲーム
  8. ドラッグ可能なポップアップウインドウを作ろう
  9. jQuery UI Sortableで1ラインオセロゲーム
  10. ブラウザ全体をブロックしてみる
  11. Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする
  12. 発生したイベントの状態を保持・保存する6つのパターン
  13. Ajaxを利用したシンプルなイメージギャラリーを作ってみる
  14. テーブルにページ送り(ページング)を実装してみる
  15. jQuery UI Draggableを使って付箋(sticky)を作ってみる
  16. カラムでソートできるテーブルを自作してみる
  17. テーブルを使ったシンプルなドット絵エディタを作ってみる
  18. iPhoneのようにマウスではじいてスクロール(フリックスクロール)を実装してみる
  19. テキストフィールドの数値をマウスの上下移動で増減する
  20. iPhoneのように大きい画像の表示領域をマウスのドラッグで移動してみる
  21. iPhoneのように画像をダブルクリックした地点を中心に拡大縮小する
  22. リアルタイムプレビュー付きのHTMLエディタを作ろう
  23. 保存できる付箋を作ってみる(Cookie、localStorage)

ブラウザ画面のブロック

モーダルウインドウを表示したときは、ウインドウの後ろの操作はできないようにしたいですね。そういう用途に適した、ブラウザ全体をブロックするレイヤをjQueryで実現してみましょう。今回も車輪の再発明です。ちゃんとしたものが欲しければ「jQuery BlockUI Plugin」をどうぞ。

実行結果

ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<title>ブラウザ画面のブロック</title>
<script>
$(function() {
  $('#block').click(function() {
    $('#shim').css({
      backgroundColor: 'black',
      position: 'absolute',
      display: 'block',
      left: 0,
      top: 0,
      opacity: 0.5,
      width: $(document).width(),
      height: $(document).height()
    });
    $(window).on('resize.shim', function() {
      $('#shim').css({
        width: $(document).width(),
        height: $(document).height()
      });
    });
  });
  $('#shim').click(function() {
    $(this).css({display: 'none'});
    $(window).off('resize.shim');
  });
});
</script>
</head>
<body>
<a href="#" id="block">ブロック!</a>
<div id="shim"></div>
</body>
</html>

プログラムの解説

画面をブロックするレイヤを「shim」と名づけています。shimは「クサビ」という意味です。
<div id="shim"></div>
ソースの最下部あたりにあるこの行が画面をブロックするレイヤを表しています。

shimのCSS

$('#shim').css({
  backgroundColor: 'black',
  position: 'absolute',
  display: 'block',
  left: 0,
  top: 0,
  opacity: 0.5,
  width: $(document).width(),
  height: $(document).height()
});
positionをabsoludeにして、幅と高さをdocumentの幅と高さに合わせることによって画面全体を覆うようにしています。「opacity: 0.5」はshimを半透明にしている部分です。IE6ではopacityプロパティはサポートされていないのですが、jQueryが良きようにはからってくれます。

ブラウザのリサイズイベント

$(window).on('resize.shim', function() {
  $('#shim').css({
    width: $(document).width(),
    height: $(document).height()
  });
});
ブラウザがリサイズされたときに、shimのサイズをそれに追従して合わせている部分です。window要素に対してresizeイベントを追加しています。resizeの後ろに「.shim」は名前空間で、イベントを削除するときに識別するために使います。
$(window).off('resize.shim');
ブロック終了時にブラウザのリサイズイベントを削除しています。
前ページ jQuery入門 TOP 次ページ
このエントリーをはてなブックマークに追加 そっか0

このページに関するコメントをどうぞ

お名前:


ataru
もぐらたたきに絵を入れるとしたら、どこを変えたらいいのですか?
2016/09/06 14:20



2016/09/04 21:30



2016/08/30 19:27

ページング作成中
シンプルだけど結構応用が効く!
2016/07/25 18:26

良く理解しましょう
$(function() {
$('input').click(function() {
if ($(this).val() == 3) alert('正解!');
else alert('はずれ!');
});
});

valの値が2番なら正解を表示と言う意味なので、3番目を正解にするなら

val() == 3)書き換えればいいです。

inputのところは関係ないです。
2016/03/07 15:52

教えてください
クイズゲームの作り方で、2問目、3問目を作っても絶対に
2番が正解になりますよね?

input要素を読み込んでいるので、全て同じ動作になると思うんですが、他の番号を正解にしたい場合どうしたら良いでしょうか?

また、inputにid行ってみましたが、うまく反応しませんでした。
2016/03/07 14:13

まほ
わかりやすく説明していただきありがとうございます!
ところで、
$.each(items, function(i, item) {
make().css(item.css).html(item.html);
});
の部分だけ今ひとつ理解ができなかったのですが
localStorage.stickyに値が入っているときに
①itemsという配列に JSON形式の文字列をjsのオブジェクトとして返し
②それぞれのitemsの要素に対してcss、htmlの要素の中身を入れている

という認識で良いでしょうか?

function(i,item)のところにiが入っていますが、これはどこに影響を与えているのでしょうか?

長々とすみませんがご回答いただければ嬉しいです!
2016/02/17 21:03

ぴよよ
↓ 目次8からHTMLのheadの部分の記述が・・・スミマセン
2016/02/06 01:34

ぴよよ
これまでスムーズにできたのですが、今回わからないです><;
2016/02/06 01:31

UT
わかりやすいですね!感謝します。
2016/01/26 10:02

残りを読む »