*

簡単popupの設置方法。Pop Easyを設置してみました。

公開日: : css3, html5, jquery, popuop, 未分類

今回は、ポップアップ(popup)の設置に取り組んでみました。

 

ポップアップは、サイトコンテンツの内容によって非常に便利に使えると思います。

ボタンを押したら出てくるので、TOPページが綺麗に整理できる。

TOPページにあまり表示させたくないサイトには、おすすめです。

 

ポップアップについて調べてみて、何個かありましたが、

今回は、Pop Easyをいうポップアップを設置してみました。

 

まずは、こちらをみてください。

デモ

 

 

今回は、ポップアップの設置のみなので

デザインの方は、ご勘弁ください。

色のかなりアンバランスな配色になっていますが、

指定箇所がわかるようにわざと明るい色に設定しています。

 

 

以下に設置方法を記載します。

今回はこの3つのscriptファイルを使用します。

 

・前準備

htmlファイルのbodyの中にscriptを埋め込んでください。

<body>

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js”></script>
<script type=’text/javascript’ src=’js/jquery.modal.js’></script>
<script type=’text/javascript’ src=’js/site.js’></script>

</body>

 

cssファイル以下の1つを使用します。

htmlファイルのheadの中にcssを指定ください。

<head>

<link rel=”stylesheet” type=”text/css” href=”css/main.css”>

</head>

※指定しているところにファイルがきちんとあるか、確認してください。

ファイルは最後の所にダウンロードできるようになっています。

その後、以下のようなソースです。

————————————————————————————————————-

html(index.htmlのファイル)

<div>
<a href=”#modal1″>Click Me</a>
</div>

<div></div>

<div id=”modal1″>
<p>Close</p>
<div>popupが開きます。<br>ここに書きたいコンテンツを書いてください。</div>
</div>
————————————————————————————————————-

css(main.cssのファイル)
/* Closeボタンの設定 */
.modal p {
font-size: 14px;
text-align: left;
margin: 10px 0 0;
}
.modal p:hover {
cursor: pointer;
}

/* Clickボタンの設定 */
.centerUp {
margin: 0 auto;
margin-bottom: 80px;
width: 960px;
background: #0000ff;
}

/* Clickボタンの設定 */
.centerUp a {
display: block;
width: 280px;
height: 50px;
margin: 0 auto;
margin-bottom: 80px;
padding: 30px 0 0;
font-size: 18px;
color: #fff;
text-decoration: none;
background: #ff00ff;
-webkit-box-shadow: inset 0 1px 1px #ffbfb3, 0 2px 5px #732e20;
-moz-box-shadow: inset 0 1px 1px #ffbfb3, 0 2px 5px #732e20;
box-shadow: inset 0 1px 1px #ffbfb3, 0 2px 5px #732e20;
border: 1px solid #884335;
}
/* Clickボタンマウスオーバーの設定 */
.centerUp a:hover {
background: #00ff00;
}
/* overlay背景の設定 */
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
display: none;
}
/* popup表示の設定 */
.modal {
display: none;
background: #eee;
padding: 0 20px 20px;
overflow: auto;
z-index: 1001;
position: absolute;
width: 500px;
min-height: 300px;
}

————————————————————————————————————-

script(site.jsのファイル)※このファイルでポップアップのカスタマイズができます。

$(document).ready(function(){

$(‘.modalLink’).modal({
trigger: ‘.modalLink’,          // id or class of link or button to trigger modal
olay:’div.overlay’,             // id or class of overlay
modals:’div.modal’,             // id or class of modal
animationEffect: ‘fadeIn’,   // overlay effect | slideDown or fadeIn | default=fadeIn
animationSpeed: 400,            // speed of overlay in milliseconds | default=400
moveModalSpeed: ‘slow’,         // speed of modal movement when window is resized | slow or fast | default=false
background: ‘000000’,           // hexidecimal color code – DONT USE #
opacity: 0.7,                   // opacity of modal |  0 – 1 | default = 0.8
openOnLoad: false,              // open modal on page load | true or false | default=false
docClose: true,                 // click document to close | true or false | default=true
closeByEscape: true,            // close modal by escape key | true or false | default=true
moveOnScroll: true,             // move modal when window is scrolled | true or false | default=false
resizeWindow: true,             // move modal when window is resized | true or false | default=false
video: ‘http://player.vimeo.com/video/2355334?color=eb5a3d’,    // enter the url of the video
videoClass:’video’,             // class of video element(s)
close:’.closeBtn’               // id or class of close button
});
});

————————————————————————————————————-

script(jquery.modal.jsのファイル)
(function($){

$.fn.modal= function(options){

options = $.extend({
trigger: ‘.modalLink’,
olay: ‘div.overlay’,
modals: ‘div.modal’,
animationEffect: ‘fadeIn’,
animationSpeed: 400,
moveModalSpeed: ‘slow’,
background: ‘000’,
opacity: 0.8,
openOnLoad: false,
docClose: true,
closeByEscape: true,
moveOnScroll: true,
resizeWindow: true,
video:”,
videoClass:’video’,
close:’.closeBtn’

},options);

var olay = $(options.olay);
var modals = $(options.modals);
var currentModal;
var isopen=false;

if (options.animationEffect===’fadein’){options.animationEffect = ‘fadeIn’;}
if (options.animationEffect===’slidedown’){options.animationEffect = ‘slideDown’;}

olay.css({opacity : 0});

if(options.openOnLoad) {
openModal();
}else{
olay.hide();
modals.hide();
}

$(options.trigger).bind(‘click’, function(e){
e.preventDefault();

if ($(‘.modalLink’).length >1) {
getModal = $(this).attr(‘href’);
currentModal = $(getModal);
}else{
currentModal = $(‘.modal’);
}
openModal();
});

function openModal(){
$(‘.’ + options.videoClass).attr(‘src’,options.video);
modals.hide();
currentModal.css({
top:$(window).height() /2 – currentModal.outerHeight() /2 + $(window).scrollTop(),
left:$(window).width() /2 – currentModal.outerWidth() /2 + $(window).scrollLeft()
});

if(isopen===false){
olay.css({opacity : options.opacity, backgroundColor: ‘#’+options.background});
olay[options.animationEffect](options.animationSpeed);
currentModal.delay(options.animationSpeed)[options.animationEffect](options.animationSpeed);
}else{
currentModal.show();
}

isopen=true;
}

function moveModal(){
modals
.stop(true)
.animate({
top:$(window).height() /2 – modals.outerHeight() /2 + $(window).scrollTop(),
left:$(window).width() /2 – modals.outerWidth() /2 + $(window).scrollLeft()
},options.moveModalSpeed);
}

function closeModal(){
$(‘.’ + options.videoClass).attr(‘src’,”);
isopen=false;
modals.fadeOut(100, function(){
if (options.animationEffect === ‘slideDown’) {
olay.slideUp();
}else if (options.animationEffect === ‘fadeIn’) {
olay.fadeOut();
}
});
return false;
}

if(options.docClose){
olay.bind(‘click’, closeModal);
}

$(options.close).bind(‘click’, closeModal);

if (options.closeByEscape) {
$(window).bind(‘keyup’, function(e){
if(e.which === 27){
closeModal();
}
});
}

if (options.resizeWindow) {
$(window).bind(‘resize’, moveModal);
}else{
return false;
}

if (options.moveOnScroll) {
$(window).bind(‘scroll’, moveModal);
}else{
return false;
}
};
})(jQuery);
————————————————————————————————————-

以上でポップアップの設置ができます。

わかりにくいところがありましたら、こちらも参考にしてみてください。

Pop Easy

自分もこのサイトを参考にしました。

 

 

今回の1つのファイルをUPしときましたので、

よかったら使ってください。

popup

 

————————————————————————————————————-

補足=site.jsファイルでポップアップ表示のSeedなどが変更できます。

簡単なカスタマイズをするならこのファイルで変更が可能です。

jquery.modal.jsではもっと細かいカスタマイズができそうです。

ポップアップにこだわりたい方は、こちらを変更した方がいいと思います。

ちなみに私は、このファイルはいじってません。

あまりよくわからなかったので・・・。

あんまり参考にならなくてすいません・・・。


関連記事

no image

スクロールバーのカスタマイズ。jScrollPaneを使用してみました。

今回は、スクロールバーのカスタマイズに取り組んでみました。   サイトにスクロ

記事を読む

no image

マウスオーバーした時に画像を半透明にする。”opacity”を使用する。

今回は、マウスオーバーをした際に半透明にするという事を調べてみました。 マウスオーバーをし

記事を読む

no image

テキストがアコーディオンのように開く。

今回は、テキストをアコーディオンのように開く方法について調べてみました。 ページが読み込まれた

記事を読む

no image

海外サイトのかっこいいサイト集。

サイトを作成するにあたってもっとも大切なものは、想像力だとおもいます。 デザイナーの方などは特

記事を読む

no image

カスタマイズができるスライドショーを設置する方法。diapoを使用。

今回は、スライドショーを設置してみました。 ホームページにスライドショーを設置するのは、当たり

記事を読む

no image

ページトップへスクロールする方法。

今回は、スクロールしたら、top(一番上)にいく方法を調べてみました。 コンテンツが、縦長にな

記事を読む

“html”このタグの中になんのタグを入れれるんだっけ?

今回は、このタグの中になんのタグを入れれるんだっけ? という記事を見つけたので、ご紹介したいと思い

記事を読む

-jQuery-チェックをつけないとボタンが押せなくする方法

今回は、チェックボックスにチェックをつけないとボタンを押せないようにする方法を作成してみました。

記事を読む

no image

背景に画像をフルスクリーンさせる方法。 maximageを使用。

今回は、背景画像をフルスクリーンにし、なおかつ、スライダーする方法について、調べてみました。

記事を読む

no image

HP作成に必要なもの。

今週は、ブログの更新が遅くなりました。 今作業している内容では、ネタがないという理由で更新がな

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑