このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/jquery.custombox.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.custombox.js"></script>
<script>
	$(window).load(function(){
		$('#custombox .type01').on('click', function (e) {
			e.preventDefault();
			$this = $(this);
			var _type = $this.attr('id');
			$.fn.custombox( this, {
				effect: _type,
				complete: function () {
					setYoutube($this.data('youtube'));
				},
				close: function () {
					$('#custombox-modal-content .customboxModal-body p').empty();
				}
			});
		});
		
		
		var slide_position = ['top','right','bottom','center','left'];
		
		$('#slide').on('click', function ( e ) {
			$this = $(this);
			$.fn.custombox( this, {
				effect:     'slide',
				position:   slide_position[Math.floor( Math.random() * slide_position.length )],
				complete: function () {
					setYoutube($this.data('youtube'));
				},
				close: function () {
					$('#custombox-modal-content .customboxModal-body p').empty();
				}
			});
			e.preventDefault();
		});			
		
		var flip_position = ['vertical','horizontal'];
		
		$('#flip').on('click', function ( e ) {
			$this = $(this);
			$.fn.custombox( this, {
				effect:     'flip',
				position:   flip_position[Math.floor((Math.random()*2))],
				complete: function () {
					setYoutube($this.data('youtube'));
				},
				close: function () {
					$('#custombox-modal-content .customboxModal-body p').empty();
				}
			});
			e.preventDefault();
		});
		
		var rotate_position = ['bottom','left'];
		
		$('#rotate').on('click', function ( e ) {
			$this = $(this);
			$.fn.custombox( this, {
				effect:     'rotate',
				position:   rotate_position[Math.floor((Math.random()*2))],
				complete: function () {
					setYoutube($this.data('youtube'));
				},
				close: function () {
					$('#custombox-modal-content .customboxModal-body p').empty();
				}
			});
			e.preventDefault();
		});
			

		$('#letmein').on('click', function ( e ) {
			$this = $(this);
			$.fn.custombox( this, {
				effect: 'letmein',
				open: function () {
					$('#sidebar').removeAttr('style');
				},
				complete: function () {
					setYoutube($this.data('youtube'));
				},
				close: function () {
					$('#custombox-modal-content .customboxModal-body p').empty();
					deleteCustomboxContainer();
				}
			});
			e.preventDefault();
		});
		
		
		
		$('#makeway').on('click', function ( e ) {
			$this = $(this);
			$.fn.custombox( this, {
			effect: 'makeway',
				open: function () {
					$('#sidebar').removeAttr('style');
				},
				complete: function () {
					setYoutube($this.data('youtube'));
				},
				close: function () {
					$('#custombox-modal-content .customboxModal-body p').empty();
					deleteCustomboxContainer();
				}
			});
			e.preventDefault();
		});
		
		
		
		$('#slip').on('click', function ( e ) {
			$this = $(this);
			$.fn.custombox( this, {
				effect: 'slip',
				open: function () {
					$('#sidebar').removeAttr('style');
				},
				complete: function () {
					setYoutube($this.data('youtube'));
				},
				close: function () {
					$('#custombox-modal-content .customboxModal-body p').empty();
					deleteCustomboxContainer();
				}
			});
			e.preventDefault();
		});
			
			
		function setYoutube(url) {
			$('#custombox-modal-content .customboxModal-body p').append('<iframe width="420" height="315" src="' + url +'?autoplay=1" frameborder="0" allowfullscreen></iframe>');
		}
		
		function deleteCustomboxContainer() {
			if($('.custombox-container').size() != 0) {
				$ele = $('.custombox-container').children();
				$('body').append($ele);
				$('.custombox-container').remove();
			}
			if(chkInLightBox()) {
				$('.hatena').children().remove();
				$('.sns-area.global-header .hatena').append(getSnsBtn('hatena', 'top'));
			}
			else {
				$('.hatena').children().remove();
				$('.sns-area.in-contents .hatena').append(getSnsBtn('hatena', 'page'));
			}
		}
	});
</script>
<button href="#customboxModal" class="blue type01" id="fadein" data-youtube="//www.youtube.com/embed/ZL2zWhAJ55w">Fadein</button>
<button href="#customboxModal" class="blue" id="slide" data-youtube="//www.youtube.com/embed/UelJZG_bF98">Slide</button>
<button href="#customboxModal" class="blue type01" id="newspaper" data-youtube="//www.youtube.com/embed/4jSsS9AbpfE">Newspaper</button>
<button href="#customboxModal" class="blue type01" id="fall" data-youtube="//www.youtube.com/embed/BvTkefJHfC0">Fall</button>
<button href="#customboxModal" class="blue type01" id="sidefall" data-youtube="//www.youtube.com/embed/sdmsRcsl_xA">Sidefall</button>
<button href="#customboxModal" class="blue type01" id="blur" data-youtube="//www.youtube.com/embed/9-zPIT3Q6lI">Blur</button>
<button href="#customboxModal" class="blue" id="flip" data-youtube="//www.youtube.com/embed/SQPee4B7dtc">Flip</button>
<button href="#customboxModal" class="blue type01" id="sign" data-youtube="//www.youtube.com/embed/i6BKhvhSehc">Sign</button><br />
<button href="#customboxModal" class="blue type01" id="superscaled" data-youtube="//www.youtube.com/embed/fBRZWrM1_jo">Superscaled</button>
<button href="#customboxModal" class="blue type01" id="slit" data-youtube="//www.youtube.com/embed/Ni6hBkkwFXE">Slit</button>
<button href="#customboxModal" class="blue" id="rotate" data-youtube="//www.youtube.com/embed/01N6dMUBNXQ">Rotate</button>
<button href="#customboxModal" class="blue" id="letmein" data-youtube="//www.youtube.com/embed/Lr8xecd4F00">Letmein</button>
<button href="#customboxModal" class="blue" id="makeway" data-youtube="//www.youtube.com/embed/A2Y6ay-41No">Makeway</button>
<button href="#customboxModal" class="blue" id="slip" data-youtube="//www.youtube.com/embed/9kmJXG9qIvM">Slip</button>


<div id="customboxModal">
	<div class="customboxModal-header">
		<p class="close"><a href="#" onclick="$.fn.custombox('close');">close</a></p>
	</div>
	<div class="customboxModal-body">
		<p></p>
	</div>
</div>

customboxについて

customboxは、豊富なアクションを持つモーダルを設置できるプラグインです。
シンプルですが、表示時のアニメーションが豊富に用意されているので、色々な見せ方ができそうです。
letmein, makeway, slipのアクションを使うとhatenaボタンのブックマークボタンが消える現象が起こります。
body以下の要素が.custombox-containerに移動する時に、hatenaボタンのiframe内のhtml要素が全て空になってしまうためなのですが、原因がよくわかりません。
無理やり対策しているのですが、挙動が少しおかしくなっています。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • Colorbox

    Colorbox

    簡単にモーダル、ポップアップウィンドウを設置することができる

  • Boxer

    Boxer

    シンプルなモーダルを設置できる

  • MagnificPopup

    MagnificPopup

    画像、フォーム、動画などをモーダルで表示できる

  • popeye

    popeye

    一味違うモーダル・ポップアップ

  • photobox

    photobox

    とりあえずイケてます