*

簡単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

ボタンを押すとコンテンツが現れる方法。スライドパネル。

今回は、ボタンを押すとコンテンツが現れる方法を調べてみました。 ボタン押すと下にコンテンツが現

記事を読む

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

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

記事を読む

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

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

記事を読む

no image

htmlの書き方について。

ホームページを作成するのには、flashを除けばほとんどhtmlで書きます。 ホームページがた

記事を読む

no image

jquryで問い合わせフォームのデザインを作ってみた。

今回は、jquryで問い合わせフォームを作ってみました。   問い合わせフォー

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

エラーページの表示方法。 .htaccessに書く。ErrorDocument 404使用。

今回は、エラーページの表示方法について。調べてみました。 まず、エラーページとはなにか? エ

記事を読む

no image

jqueryを使って画像を拡大・縮小させる。

今回は、画像を拡大・縮小させるという事をやってみました。 前回は、画像を回転させるという事をや

記事を読む

no image

animationでboxを動かしてみた。

今回は、animationを使って、boxを動かしてみました。 マウスを乗せたときに指定したb

記事を読む

Message

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

PAGE TOP ↑