【jquery】スクロールできるモーダルウインドウの作り方

http://naming-dic.com/word2.html?lang=en&wordurl=48132895

スクロールできるモーダルウインドウの作り方

以下のページを参考にして、自分の環境用にいじったもの

jQueryでスクロールバーの出るモーダルウィンドウを作る方法

ウィンドウのスクロールバーの横幅を計算するjQueryコード

モーダルを表示したときに背景部分はスクロールできないようにする

/////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>[DEMO]jQueryでスクロールバーの出るモーダルウィンドウを作る方法</title>
<script src="js/jquery.js"></script>
<script>
//スクロールバーの出るモーダルウィンドウ
///////////////////////////////////////////////////////
// スクロールバーの横幅を取得
$('html').append('<div class="scrollbar" style="overflow:scroll;"></div>');

//これがスクロールバーの横幅
var scrollbar_width = window.innerWidth - $(window).outerWidth(true);
$('.scrollbar').hide();

var current_scrollY;

// 「.modal-open」がクリックされたら
$('.modal-open').click(function(){

//スクロール済みの距離を取得
current_scrollY = $( window ).scrollTop();

//overflow: 'hidden' で下地画面をロックすると、画面が上に戻ってしまうので
//現在地まで移動させる
$( '#wrap' ).css( { top: -1 * current_scrollY } );

//下画面ロック
$( 'html, body' ).css( { overflow: 'hidden' } );

// オーバーレイ用の要素を追加
$('body').append('<div class="modal-overlay"></div>');

// オーバーレイをフェードイン
$('.modal-overlay').fadeIn('slow');

// モーダルコンテンツのIDを取得
var modal = '#' + $(this).attr('data-target');

// モーダルコンテンツを囲む要素を追加
$(modal).wrap("<div class='modal-wrap'></div>");

// モーダルコンテンツを囲む要素を表示
$('.modal-wrap').show();

// モーダルコンテンツの表示位置を設定
modalResize();

// モーダルコンテンツフェードイン
$(modal).fadeIn('slow');

// モーダルコンテンツをクリックした時はフェードアウトしない
//「.modal-open」がクリックされたときにはじめてイベントの登録(イベントが起こったとき関数が呼ばれるようにする)
$(modal).click(function(e){
e.stopPropagation();
});

// 「.modal-overlay」あるいは「.modal-close」をクリック
//「.modal-open」がクリックされたときにはじめてイベントの登録(イベントが起こったとき関数が呼ばれるようにする)
$('.modal-wrap, .modal-close').off().click(function(){
// モーダルコンテンツとオーバーレイをフェードアウト
$(modal).fadeOut('slow');
$('.modal-overlay').fadeOut('slow',function(){

// オーバーレイを削除
$('.modal-overlay').remove();

// モーダルコンテンツを囲む要素を削除
$(modal).unwrap("<div class='modal-wrap'></div>");

//モーダルウインドウを開いたときに設定したの current_scrollY を解除
$( '#wrap' ).css( { top: 0 } );

//overflow 'hidden' から戻す
$( 'html, body' ).css( { overflow: 'visible' } );

alert('current_scrollY' + current_scrollY + 'px');

//モーダルを表示する前の位置に戻る
$(window).scrollTop(current_scrollY);

});
});

// リサイズしたら表示位置を再取得
$(window).on('resize', function(){
modalResize();
});

// モーダルコンテンツの表示位置を設定する関数
///////////////////////////////////////////////////////
///////////////////////////////////////////////////////
function modalResize(){

// ウィンドウの横幅、高さを取得
var w = $(window).width();
var h = $(window).height();

// モーダルコンテンツの横幅、高さを取得
var mw = $(modal).outerWidth(true);
var mh = $(modal).outerHeight(true);

// モーダルコンテンツの表示位置を設定
if ((mh > h) && (mw > w)) {

$(modal).css({'left': 0 + 'px','top': 0 + 'px'});

} else if ((mh > h) && (mw < w)) {
var x = (w - scrollbar_width - mw) / 2;
// alert('アラート2\nx' + x + 'px\nh' + h + 'px\nw' + w + 'px\nscrollbar_width' + scrollbar_width + 'px\nmw(モーダル幅)' + mw + 'px\nwindow.innerWidth(垂直スクロールバー(表示されている場合)を含む幅)' + window.innerWidth + 'px\nclientWidth' + $('.scrollbar').prop('clientWidth') + 'px\ncurrent_scrollY(スクロールした距離)' + current_scrollY + 'px');
$(modal).css({'left': x + 'px','top': 0 + 'px'});
} else if ((mh < h) && (mw > w)) {

var y = (h - scrollbar_width - mh) / 2;
$(modal).css({'left': 0 + 'px','top': y + 'px'});

} else {

var x = (w - mw) / 2;
var y = (h - mh) / 2;
$(modal).css({'left': x + 'px','top': y + 'px'});

} //if

}
///////////////////////////////////////////////////////
///////////////////////////////////////////////////////
//function modalResize ここまで
</script>

<style>
body {
margin:10px;
padding:10px;
border:10px solid #ddd;
}

.lock {
overflow:hidden;
}

.modal-content {
position:relative;
display:none;
width:50%;
margin:30px;
padding:10px 20px;
border:2px solid #aaa;
background:#fff;
}

.modal-content p {
margin:0;
padding:0;
}

.modal-overlay {
z-index:1;
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:120%;
background-color:rgba(0,0,0,0.75);
}

.modal-wrap {
z-index:2;
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;
}

.modal-open {
color:#00f;
text-decoration:underline;
}

.modal-open:hover {
cursor:pointer;
color:#f00;
}

.modal-close {
color:#00f;
text-decoration:underline;
}

.modal-close:hover {
cursor:pointer;
color:#f00;
}
</style>
</head>
<body>
<a data-target="con1" class="modal-open">リンク1</a>
<a data-target="con2" class="modal-open">リンク2</a>
<a data-target="con3" class="modal-open">リンク3</a>
<a data-target="con4" class="modal-open">リンク4</a>
<a data-target="con5" class="modal-open">リンク5</a>

<div id="con1" class="modal-content">
<p><a href="./">リンク1の内容です。</a>・・・</p>
<p><a class="modal-close">閉じる</a></p>
</div>
<div id="con2" class="modal-content">
<p><a href="./">リンク2の内容です。</a>・・・</p>
<p><a class="modal-close">閉じる</a></p>
</div>
<div id="con3" class="modal-content">
<p><a href="./">リンク3の内容です。</a>・・・</p>
<p><a class="modal-close">閉じる</a></p>
</div>
<div id="con4" class="modal-content">
<p><a href="./">リンク4の内容です。</a>・・・</p>
<p><a class="modal-close">閉じる</a></p>
</div>
<div id="con5" class="modal-content">
<p><a href="./">リンク5の内容です。</a>・・・</p>
<p><a class="modal-close">閉じる</a></p>
</div>
<p>
クリックしてみてください。ウィンドウより大きいモーダルウィンドウにはスクロールバーが出ていると思います。<br>
</p>

</body>
</html>
/////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////

【mysql】Row size too large (> 8126) のエラー対処法

mysql で update を実行した際、以下のエラーが出た

-------------------------------------------------
Row size too large (> 8126). Changing some columns to TEXT or BLOB or using ROW_FORMAT=DYNAMIC or ROW_FORMAT=COMPRESSED may help. In current row format, BLOB prefix of 768 bytes is stored inline.
-------------------------------------------------

ROW_FORMATが「Compact」のときに、8126バイト以上のレコードを入力しようとすると出るエラーらしい。

ターミナルの mysql から現在の ROW_FORMAT を確認

-------------------------------------------------
use データベース名 ← データベースを選択

SHOW TABLE STATUS LIKE 'テーブル名'\G
-------------------------------------------------

出力結果
*************************** 1. row ***************************
Name: テーブル名
Engine: InnoDB
Version: 10
Row_format: Compact
Rows: 35155
Avg_row_length: 4583
Data_length: 161136640
Max_data_length: 0
Index_length: 0
Data_free: 6291456
Auto_increment: 46319
Create_time: 2018-03-09 16:18:39
Update_time: NULL
Check_time: NULL
Collation: utf8_general_ci
Checksum: NULL
Create_options:
Comment:
1 row in set (0.01 sec)

Row_format の Compact の部分を、DYNAMIC か COMPRESSED に変更すれば消えるらしい。で、変更するには innodb_file_format が Barracuda になっていないといけない。

innodb_file_format を確認

-------------------------------------------------
mysql> SHOW GLOBAL VARIABLES LIKE '%innodb_file_%';
-------------------------------------------------

出力結果
+--------------------------+-----------+
| Variable_name | Value |
+--------------------------+-----------+
| innodb_file_format | Antelope |
| innodb_file_format_check | ON |
| innodb_file_format_max | Antelope |
| innodb_file_per_table | ON |
+--------------------------+-----------+
4 rows in set (0.00 sec)

innodb_file_format が Antelope なので Barracuda に変更する必要がある。

my.cnfを編集
-------------------------------------------------
vim /etc/my.cnf
-------------------------------------------------

[mysqld]以下に追記
-------------------------------------------------
[mysqld]
innodb_file_per_table = 1
innodb_file_format = Barracuda
innodb_file_format_max = Barracuda
-------------------------------------------------

service mysqld restart で再起動

変更を確認
mysql> SHOW GLOBAL VARIABLES LIKE '%innodb_file_%';
+--------------------------+-----------+
| Variable_name | Value |
+--------------------------+-----------+
| innodb_file_format | Barracuda |
| innodb_file_format_check | ON |
| innodb_file_format_max | Barracuda |
| innodb_file_per_table | ON |
+--------------------------+-----------+
4 rows in set (0.00 sec)

↑一度 mysqld を再起動しても反映されていない時があった。必ず反映していることを確認すること。

ここまでで、Row_format を Compact → DYNAMIC (or COMPRESSED)に変更する下準備ができたことになる。

再度確認
-------------------------------------------------
use データベース名 ← データベースを選択

SHOW TABLE STATUS LIKE 'テーブル名'\G
-------------------------------------------------

まだ Row_format は Compact のまま

今回は ROW_FORMAT を DYNAMIC にするので以下を実行
-------------------------------------------------
mysql> ALTER TABLE `テーブル名` ROW_FORMAT=DYNAMIC;
-------------------------------------------------

無事に変更されていることを確認する
-------------------------------------------------
use データベース名 ← データベースを選択

SHOW TABLE STATUS LIKE 'テーブル名'\G
-------------------------------------------------

phpmyadminでデータベースをエクスポートしたらphpの実行時間オーバー

phpmyadminからデータベースをエクスポートしたらphpの実行時間オーバーでできなかった。

解決方法1
ターミナルでサーバーにログインしてダウンロードする

phpの実行時間オーバーなので php を使わずにエクスポートする。

////////////////////////////////////////
mysqldump -u root -p database_name > ダウンロード後のファイル名.sql
////////////////////////////////////////

上記は mysql はログインせずに実行する。ダウンロード先はカレントディレクトリになるので、不都合ならパスを指定する。

解決方法2
php の実行時間を延長させる。