HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

フロートウィンドウ javascript

ワードプレスにフロートウィンドウを組み込む

スクロールしても同じ位置に表示されるフロートウィンドウ
プラグインだと多くは、ウィジェットに対応する。
そうなると、まったく別のナビなどにすることができない。
 

改良部

header.php


ヘッド部に使用するスクリプト取り込みなどを挿入
<head>
 :
<!-- FLOAT WINDOW -->
<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/window.js"></script>
<link href="themes/default.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
var openWin = function(){
	var win = new Window({className: "dialog", width:160, height:320, zIndex: 100, title: "window title"})
	win.getContent().update("<a href='#a1'>Jump1</a><br />"); // コンテンツ
	win.showCenter(false,232,5); // modal:true/false,top position,left position
}
</script>
<!--/FLOAT WINDOW -->
 :
</head>
 
Body を変更してトップページでだけ有効にする場合
<!-- FLOAT WINDOW -->
<?php if( is_home() ) : ?>
 <body class="page page-id-14 page-template page-template-page-nosidebar-php logged-in admin-bar no-customize-support custom-background" Onload="openWin();">
<?php else: ?>
 <body class="page page-id-14 page-template page-template-page-nosidebar-php logged-in admin-bar no-customize-support custom-background">
<?php endif; ?>
<!--/FLOAT WINDOW -->
 

ウィンドウの書式を変えるには

css を変更する。
らしいがIEでは、default以外まともに動かない。
<!-- FLOAT WINDOW -->
 :
<link href="default.css" rel="stylesheet" type="text/css"/>
 :
<!--/FLOAT WINDOW -->
 

スクリプト

提供先→http://prototype-window.xilinus.com/index.html
スクリプト控え→1.3

スポンサーリンク

関連記事

スポンサーリンク

カテゴリー