めずらしく連続postです。

業務で使わせていただいているa-blog cmsですが、標準でjQuery UIを読んでます。

そんで、a-blog cmsはログイン時に表示される、#adminBoxってゆうブロックがあるんですけど、

[caption id="attachment_1189" align="alignnone" width="542" caption="これね"]

[/caption]

これ、ウチの会社では、body直下にどーんってwidth100%で配置しちゃってたんですけど、
コーディングの関係で、bodyにbackground設定してたりすると、ログイン時に画像がズレて、なんか表示がおかしくなっちゃうんですよね。

かといって、position:fixedしちゃうと、ヘッダーのメニューにかかったりしてなんか微妙。
案件毎にcss最適化するのもめんどいしー

んーーー、どうしたもんかなー？
と考えてたところ、今日やっと解決。

$(function(){
           
    $('#adminBox').css({
        cursor:'move',
        zIndex:'100',
        position:'fixed',
        top:'10px',
        zIndex:'100',
        borderRadius:'10px',
        background:'rgba(233,233,233,0.8)'
    }).draggable().hide().slideDown();

});

これを読ませれば( ｀д´)b ｵｯｹｰ!

こんな感じになります。

冒頭で言ってた、jQuery UI の、draggable()をつかってるので、自由にドラッグもでき、
且つposition:fixedなので、スクロールしても常に画面内に居ます。

「とりあえず」の実装ではいい感じじゃないすかね〜？

あ、ie6とかおもいっきし無視ですが。（chromeしか動作確認してません）

↓をアドレスバーに貼っつければ、動きが試せれますのでぜひー

javascript:$('#adminBox').css({cursor:'move',zIndex:'100',position:'fixed',top:'10px',zIndex:'100',borderRadius:'10px',background:'rgba(233,233,233,0.8)'}).draggable().hide().slideDown();

tag

a-blog_cms

jQuery

js

tips

カスタマイズ