カテゴリ:   CSS/Jquery
タグ:

Tinybox2とやらを導入してみた。

Webの業界で言う「モーダルウインドウ」ってやつ。

こういうの
mordal

参考にしたサイト
http://web.showjin.me/js_tinybox2.html 

(1)とりあえず公式サイトで一式DLしてくる。

tinybox2公式
http://www.scriptiny.com/2011/03/javascript-modal-windows/

(2)DLしたファイルを解凍する

色々入ってると思うけど
imgaes
┗(close.png preload.gif / rhino.jpg)
advanced.hmtl
ajax.html
index.html
packed.js
post.php
style.css
tinybox.js


とりあえず必要なのはこの青いファイルだけ。
CSSは全部アップロードしてもしょうがないので、jsと画像だけ全部アップロード。

(3)アップロードしたら読み込む


<script src="js/tinybox.js" type="text/javascript"></script>
<script src="js/packed.js" type="text/javascript"></script>

青字のところは自分でうpしたurlに変更しる


(4)CSSはとりあえず必要な部分だけコピーして持っていけばおk


とりあえずはこの辺あれば大丈夫
---------------------------------------------------------
.tbox {position:absolute; display:none; padding:14px 17px; z-index:900}
.tinner {padding:15px; -moz-border-radius:5px; border-radius:5px; background:#fff url(images/preload.gif) no-repeat 50% 50%; border-right:1px solid #333; border-bottom:1px solid #333}
.tmask {position:absolute; display:none; top:0px; left:0px; height:100%; width:100%; background:#000; z-index:800}
.tclose {position:absolute; top:0px; right:0px; width:30px; height:30px; cursor:pointer; background:url(images/close.png) no-repeat}
.tclose:hover {background-position:0 -30px}

#error {background:#ff6969; color:#fff; text-shadow:1px 1px #cf5454; border-right:1px solid #000; border-bottom:1px solid #000; padding:0}
#error .tcontent {padding:10px 14px 11px; border:1px solid #ffb8b8; -moz-border-radius:5px; border-radius:5px}
#success {background:#2ea125; color:#fff; text-shadow:1px 1px #1b6116; border-right:1px solid #000; border-bottom:1px solid #000; padding:10; -moz-border-radius:0; border-radius:0}
#bluemask {background:#4195aa}
#frameless {padding:0}
#frameless .tclose {left:6px}

---------------------------------------------------------

赤い部分は変更しといた方がよさげなところ。
画像urlは自分のうpしたurlを貼って、bluemaskのところは使うなら背景色変更できる
※次のmaskid bluemaskを使わないなら無視でおk

(5)モーダルウインドウで表示させたいリンクにこんな感じに追加

<a onclick="
TINY.box.show({iframe:'中に表示したいURL',
boxid:'success',
width:970,
height:450,
fixed:false,
maskid:'bluemask',
maskopacity:90,
closejs:function(){closeJS()}})"
>
⇒メッセージを送る
</a><

サンプルでは<li>~</li>で動かしてるけど別に<a>~</a>でも動く

widthとかの要素は好きに変更しておk

さっきのCSSのbluemaskのところはここで使うんだけど、使わないなら他のでもおk

(6)他にどんなのがあるかはデモページでも見てね

http://sandbox.scriptiny.com/tinybox2/


ぼくはjsは独学歴3ヶ月なのでこれ系は導入するまでに必ず1回か2回はつまずくんだけど、
これは余裕でしたわ(*´ω`*)

 決してメッセージがほしいのではなくこれはjsの勉強です1!!!!

 

Comment & Trackbacks

コメント

 コメント一覧 (2)

    • 1. 通りすがりのWarframer
    • 2015年02月11日 02:48
    • 4 warframeについて調べるつもりで来たのですが、
      CSSにも興味を持ってらっしゃるようですので、このサイトおすすめです。
      既にご存知でしたらすみませんw
      コリス | サイト制作に関する最新の情報をご紹介 http://coliss.com/
      主にWebデザインやjavascriptの使える技が紹介されています。
    • 2. (名無しのティリアさん)
    • 2015年02月13日 11:21
    • ようこそTENNO
      いつか有効利用してみるのです
コメントフォーム
評価する
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット

関連記事

新着一覧