2011年11月03日

jquery simplemodal ウィンドウ

お願いします♪いいねとかつぶやいたりして下さい
 
jqueryのajaxポップアップウインドウの使い方。

さらに追記。画面外をクリックで閉じさせるには
 $(function() {  
        $('.modal-ajax').click(function (e) {  
            id = $(this).attr("id");  
            $('.modal').load('/users/face/' + id + '/').modal(
				{
                                       onOpen:$('.modal').html('<img src="/app/webroot/img/default/ajax-loader.gif">'),//loading img
					overlayClose: true//これを指定
				}
			);  
			
            return false;  
        });  
    });


追記:
閉じ方が全然わからんかった。
でも、やりかたわかりましたよ

・メイン
<script type="text/javascript">
	$(function() {
		$('.modal-ajax').click(function (e) {
			id = $(this).attr("id");
			
			$('.modal').load('/defaults/modal/' + id + '/').modal();
			
			return false;
		});
	});
	
</script>

<a href='#' class='modal-ajax' id="5">Demo5</a>
<a href='#' class='modal-ajax' id="8">Demo8</a>
<!-- modal content -->
<div class="modal">
   
</div>


・AJAXで開かれる方
<script type="text/javascript">
function modalClose()
{
	window.parent.$.modal.close();
}
</script>
<a onclick="modalClose();">閉じるよ</a>



親ウインドウの $.modal.closeを操作する感じでOKなんだ。



下記のファイルのCSSを以下のように変更してね。
CSS画像の位置とかは適当にやってね。

http://www.ericmmartin.com/projects/simplemodal-demos/

ie6はシカトします。
<script type="text/javascript" src="/js/jquery.simplemodal.min.js"></script>
<link rel="stylesheet" href="/app/webroot/css/jquery.simplemodal.basic.css" type="text/css" media="screen, projection">


・jquery.simplemodal.basic.css
.modal {display:none;}

/* Overlay */
#simplemodal-overlay {background-color:#000; cursor:not-allowed;}

/* Container */
.modal {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
.modal .simplemodal-data {padding:8px;}
.modal code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
.modal a {color:#ddd;}
a.modalCloseImg {background:url(/app/webroot/img/default/cross.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
.modal h3 {color:#84b8d9;}


・適当なhtml
<script type="text/javascript">
	$(function() {
		$('.modal-ajax').click(function (e) {
			id = $(this).attr("id");
			$('.modal').load('/defaults/modal/' + id + '/').modal();
			return false;
		});
	});
	
</script>

<a href='#' class='modal-ajax' id="5">Demo5</a>
<a href='#' class='modal-ajax' id="8">Demo8</a>
<!-- modal content -->
<div class="modal">
    
</div>


こんな感じ。
関連するタグ: javascript
あなたにとって有用な記事でしたか?是非ブックマークしておくことをおすすめします。
 




ライブラリを配布しちゃったり
webデザイン
Fireworks
HTMLコーディング
CSS
Dreamweaver
携帯サイト
webプログラム
PHP
正規表現
cakephp
MYSQL
javascript
webマーケティング
adwords
analytics
windows7
ショートカットキー
おすすめ情報
サイト
facebook
ライブラリ
配布
アプリ
iphone
ipad
サーバー
さくらサーバー
全ての記事を読む




トップ - 最新の記事一覧 - お問い合わせ