グレーアウト画面で出たポップアップを画面上をクリックではなく、「閉じる」ボタンを設置して、ボタンを押したらグレーアウト前の画面に戻す方法をご存知でしょうか。

下記のページでグレーアウトした後、閉じる(またはキャンセル)ボタンを出して、それを押すと元のページに戻るように設定したいです。
http://engagementbusiness.jp/test/index.html
ご教授願えたら幸いです。どうぞよろしくお願い致します。

回答の条件
  • 1人3回まで
  • 13歳以上
  • 登録:2010/09/17 14:32:28
  • 終了:2010/09/17 15:38:25

ベストアンサー

id:tukihatu No.1

牛乳先生(tukihatu)回答回数180ベストアンサー獲得回数322010/09/17 14:58:51

ポイント100pt

「グレーアウト画面」というのはclickボタン押した後のグレー背景の画面、という認識で大丈夫ですか?

グレーアウトといわれると普通ボタンがクリックできないとかを連想するので…

http://faq.epson.jp/faq/00/app/servlet/relatedqa?QID=002093-1


まず、ソースの以下の部分からonclickを削除します。

<div id="glayer" class="glayer" style="display: none;" onclick="Glayer.hide('glayer')">
↓
<div id="glayer" class="glayer" style="display: none;">

これで、グレー背景をクリックしても消えなくなりました。

後はボタンを設置して、そのボタンに消える処理を書いてやればいいです。

<div id="glayer" class="glayer" style="display: none;">
<div style="text-align:center;width:100%;position:absolute;top:80px;">
<div style="background-color:white;width:300px;top:80px;margin:0 auto;height:100px;padding-top:30px">
<p>メッセージをどうぞ111</p>
<p><input type="button" id="btn" value="close!" onclick="Glayer.hide('glayer')"></input>
</p>
</div>
</div>
</div>
id:ahsodik

tukihatuさま

言葉が分りづらく失礼致しました。(「グレーアウト画面」⇒「グレー背景」のことを指してました。)

教えていただいたタグで無事に解決致しました。どうもありがとうございました!!

2010/09/17 15:38:07
  • id:taknt
    グレーアウト画面って ボタンが反応しない画面のことだろ?
  • id:tasklight
    「グレーアウト画面」とは何ですか?
    takntさんがコメントしているように、ボタンが反応しない画面だとしたら、戻りようがありません。
  • id:ahsodik
    質問が不明になってしまい、失礼いたしました。
    こちらのサイトにある
    http://www.enjoyxstudy.com/javascript/glayer/extension/
    『グレーアウト+ボックスで確認表示』(アラートはいらないのですが)
    にある、「cancel」ボタンのような機能のことです。
    上記の例では、グレーアウトになった後、白枠以外をクリックしても元の画面に戻らず「cancel」などをクリックしないと元に戻れないようになっているかと思います。
    このような機能を追加したかったです。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません