かけがえのない日々

なんややんや。にょろにょろ。

PrettyPopin

2010年10月19日 | jQuery
ダイアログで外部ページを読み込んで操作。
prettypopin.jsを確保

ページ内に記述。
<script language="javascript" type="text/javascript" src="./js/prettypopin.js"></script><script language="javascript" type="text/javascript">
    $(document).ready(function(){
        $("a[rel^='prettyPopin']").prettyPopin({
            modal : false, /* true/false */
            width : 490, /* false/integer */
            height: 245, /* false/integer */
            opacity: 0.5, /* value from 0 to 1 */
            animationSpeed: 'fast', /* slow/medium/fast/integer */
            followScroll: true, /* true/false */
            loader_path: '/img/loader.gif', /* path to your loading image */
            callback: function(){} /* callback called when closing the popin */
        });
    });
</script>
<a href='worksDetail.php?id=1' class='workOpen' rel="prettyPopin" >リンク先</a><br>

cssはちょっとカスタマイズが必要。
閉じるボタンはこんな感じで上に持ってくればokかな
.prettyPopin a#b_close {
    display:none;
    position:absolute;
    z-index:2;
    top:214px;
    left:17px;
    width:27px;
    height:22px;
    text-indent:-10000px;
    background:url("/img/btnWorksClose.gif")  no-repeat;
    }

↓これが全部
#overlay {
    background: #000;
    position:absolute;
    top:0;
    left:0;
    z-index:10000;
    width:100%
}

.prettyPopin {
    display:none;
    overflow:hidden;
    position:absolute;
    z-index:11000;
    top:50%;
    left:50%;
    background: #fff;
}

.prettyPopin a#b_close {
    display:none;
    position:absolute;
    z-index:2;
    top:214px;
    left:17px;
    width:27px;
    height:22px;
    text-indent:-10000px;
    background:url("/img/btnWorksClose.gif")  no-repeat;
    }
.prettyPopin .prettyContent {
    position:relative;
    width:100%;
    height:100%;
    font-size:1.2em;
    background: #fff;
}

.prettyPopin .prettyContent .prettyContent-container {
    display:none;
    padding:0;
}

.prettyPopin .prettyContent .loader {
    position:absolute;
    top:50%;
    left:50%;
    margin:-14px 0 0 -14px;
}