*

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

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

HP作成に必要なもの。

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

記事を読む

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

-jQuery-自動で画像のフェードイン・フェードアウトをする方法

今回は、自動で画像を切り替える方法について調べてみました。 (フェイドイン・フェイドアウトのみ)

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑