<meta name="apple-mobile-web-app-capable" content="yes" />
ダイアログで外部ページを読み込んで操作。
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;
}
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;
}