*

簡単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ではもっと細かいカスタマイズができそうです。

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

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

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

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


関連記事

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

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

記事を読む

no image

背景画像だけ透明にしたい。background-color:rgbaを使う。

今回は、背景画像だけを透明にしてみました。 背景の上に透明な色を乗せたいや、テキストを書く要素

記事を読む

no image

animationでboxを動かしてみた。

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

記事を読む

no image

ドラッグの色を変更する。::selectionを使用する。

今回は、ドラッグした時に色の変更方法を書いてみました。 通常では、ドラッグをしたときは、白にな

記事を読む

no image

-jQuery-スクロールしたらあとからついてくるコンテンツの作成方法

今回は、スクロールしてもあとからついてくるコンテンツを作成してみました。 スクロールしたら

記事を読む

no image

メニューをプルダウンする方法。globalNaviを使用。

今回は、メニューをプルダウンさせる方法について調べてみました。 メニューをたくさんあると、

記事を読む

no image

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

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

記事を読む

no image

jqueryを使って画像を回転させる。jQueryRotateを使用

今回は、画像を回転させるという事をやってみました。 調べてみたところ、jqueryを使って簡単

記事を読む

no image

htmlの書き方について。

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

記事を読む

-jQuery-送信ボタン1度しか押せないようにする方法

今回は、ボタンを一度クリックしたら、押せないようにする方法をしてみました。 問い合わせ

記事を読む

Message

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

PAGE TOP ↑