サイズ指定したポップアップウィンドウをOnClickを使わずにCSSで開く

うちのSpellマスターに発注して、かなり実用的なJavascriptを作ってもらいました。

要望ポイント

  • hrefの中身を.htmlとか.php的に、ファイル指定する。(javascript:void(0);とかjavascript:;とかは使わない)
  • 開くウィンドウごとに、widthとheightを指定できる
  • web標準準拠である
  • HTMLのバージョンに依存しない
  • Strictでもバリデートチェックに通過する

こんな条件で実現できるJavascriptです。

使い方

まず、<head>〜<head>にJavascriptを記述します。これは外部JSファイルにしてもOK

<script type="text/javascript">
window.onload = function (){
var node_a = document.getElementsByTagName('a');
for (var i in node_a) {
if(node_a[i].className == 'popup'){
node_a[i].onclick = function() {
return winOpen(this.href, this.rel)
};
}
}
} ;
function winOpen(url, rel) {
var split = rel.split(',') ;
window.open(
url,'popup',
'width='+ split[0] +',height='+ split[1] +',toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes');
return false;
};
</script>

次、HTMLのa要素には下記のように記述します。ポイントはclassとrelを使用すること。
たとえば、class=”popup”とrel=”横幅数値,縦数値” みたいに書きます。

<a class="popup" rel="300,500" href="http://www.yahoo.co.jp">ウィンドウを開く</a>

ウィンドウ幅を固定するのはいかがなものかといったユーザビリティの観点からの意見もあると思いますが、この出し方の要望はお客さんによってまだまだあります。とりあえずhrefの中身をファイルで呼べるのでSEO的にも不利にはならないはず。よろしければお試し下さい。

Jimdo

オススメ書籍

10日でSEO&アクセスアップ Jimdoデザインブック

かっこいいだけではなく、人が集まるホームページを作る!

「Jimdo」(ジンドゥー)でのホームページの作成方法と運用方法を解説した書籍。解説記事を順番に読み進めて行くことで、Jimdoを使ったホームページの作成・運用・宣伝・集客の基本を、10日間で習得するのが本書のコンセプトです。12章構成の解説の中で、Jimdoの基本操作とホームページの作成、デザインとコンテンツ(内容)のレベルアップ、そしてSEOやリスティング広告を含む宣伝・集客の基本を解説しています。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


ABOUTこの記事をかいた人

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert 宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。 Webサイトのデザイン・コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年退職後すぐにマジカルリミックスを創業。2007年に法人化で株式会社マジカルリミックスを設立。Webサイト運用に関するコンサルティング、社内向けITトレーニング、セミナー出演、執筆など。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。 主な著書に『10日で作るかっこいいホームページ Jimdo(ジンドゥー)デザインブック』(エムディエヌコーポレーション)『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。