jQuery UI モーダルでダイアログを開くサンプルコード

投稿日：2017年12月4日

jQuery UI モーダル(modal)でダイアログを開くサンプルコードです。
※ jQuery 3.1 / jQuery UI 1.12

// サンプルコード
<button id="open_modal">click!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script>
$(function(){
$('#open_modal').on('click', function() {
// 多重起動防止
if ($('div#dialog_window').length) {
$('div#dialog_window').remove();
}
// 表示URL ex) /users
var get_url = '表示URL';
// モーダル画面 幅・高さ(99%)
var w = Math.round($(window).width() * 0.99);
var h = Math.round($(window).height() * 0.99);
$('body').append('<div id="dialog_window"></div>');
$('div#dialog_window').dialog({
autoOpen: false,
width: w,
height: h,
modal: true,
resizable: false,
position: {
my: 'center', at: 'center', of: window
},
close: function() {
$('div#dialog_window').remove();
},
open: function() {
$.ajaxSetup({cache: false}); // キャッシュ対策
$('.ui-dialog').addClass('hideWrap'); // load完了後まで非表示
$('.ui-dialog-titlebar').removeClass('ui-widget-header'); // .ui-widget-header削除
$('.ui-widget-overlay').css('position', 'fixed');
$('div#dialog_window').load(get_url, function(text, status) {
if (status == 'success') {
$('.ui-dialog').removeClass('hideWrap'); // load完了後に表示
} else if (status == 'error') {
$('div#dialog_window').dialog('close');
}
});
}
});
// open
$('div#dialog_window').dialog('open');
// モーダル背景をクリックしたら閉じる
$(document).on('click', '.ui-widget-overlay', function() {
$(this).prev().find('.ui-dialog-content').dialog('close');
});
});
});
</script>

// サンプルコード

<button id="open_modal">click!</button>

$(function(){

$('#open_modal').on('click', function() {

// 多重起動防止

if ($('div#dialog_window').length) {

$('div#dialog_window').remove();

}

// 表示URL ex) /users

var get_url = '表示URL';

// モーダル画面幅・高さ(99%)

var w = Math.round($(window).width() * 0.99);

var h = Math.round($(window).height() * 0.99);

$('body').append('<div id="dialog_window"></div>');

$('div#dialog_window').dialog({

autoOpen: false,

width: w,

height: h,

modal: true,

resizable: false,

position: {

my: 'center', at: 'center', of: window

close: function() {

$('div#dialog_window').remove();

open: function() {

$.ajaxSetup({cache: false}); // キャッシュ対策

$('.ui-dialog').addClass('hideWrap'); // load完了後まで非表示

$('.ui-dialog-titlebar').removeClass('ui-widget-header'); // .ui-widget-header削除

$('.ui-widget-overlay').css('position', 'fixed');

$('div#dialog_window').load(get_url, function(text, status) {

if (status == 'success') {

$('.ui-dialog').removeClass('hideWrap'); // load完了後に表示

} else if (status == 'error') {

$('div#dialog_window').dialog('close');

}

});

}

});

// open

$('div#dialog_window').dialog('open');

// モーダル背景をクリックしたら閉じる

$(document).on('click', '.ui-widget-overlay', function() {

$(this).prev().find('.ui-dialog-content').dialog('close');

});

</script>

-jQuery3
-Ajax, JavaScript, jQuery UI, サンプルコード, モーダル

執筆者：管理人

comment コメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

jQuery3 animateで指定位置まで移動するサンプルコード

jQuery3 animateで指定位置まで移動するサンプルコードです。

<div id="test"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
animate_scroll($('#test'));
// targetまでanimateにて移動
function animate_scroll(target) {
if (!target) {
return false;
}
var target_position = target.offset().top; // 移動位置取得
var adjustment_num = 20; // 位置調整(targetから上に20px)
target_position　= ((target_position - adjustment_num) > 0) ? (target_position - adjustment_num) : 0;
$('html, body').animate({scrollTop: target_position}, 400, 'linear');
}
</script>

animate_scroll($('#test'));

// targetまでanimateにて移動

function animate_scroll(target) {

if (!target) {

return false;

}

var target_position = target.offset().top; // 移動位置取得

var adjustment_num = 20; // 位置調整(targetから上に20px)

target_position　= ((target_position - adjustment_num) > 0) ? (target_position - adjustment_num) : 0;

$('html, body').animate({scrollTop: target_position}, 400, 'linear');

}

</script>

jQuery3 Ajax通信のサンプルコード

jQuery3 Ajax通信のサンプルコードです。

// ex) カテゴリ追加
$(function(){
$.ajax({
url: '/add',  // リクエスト送信先URL
type: 'POST', // get or postメソッド
timeout: 2000, // タイムアウト時間をミリ秒で設定
cache: false,  // キャッシュ無効
data: {'category_name': category_name}, // サーバーに送信する値
dataType: 'json' // サーバーから返されるデータ型
}).done(function (response, textStatus, jqXHR) {
// サーバー側[php] echo json_encode(['status' => true or false]);
if (response.status) {
// 追加成功
alert('success.');
} else {
// 追加失敗
alert('error.');
}
}).fail(function (jqXHR, textStatus, errorThrown) {
// 通信失敗
alert('error.');
});
});

// ex) カテゴリ追加

$(function(){

$.ajax({

url: '/add', // リクエスト送信先URL

type: 'POST', // get or postメソッド

timeout: 2000, // タイムアウト時間をミリ秒で設定

cache: false, // キャッシュ無効

data: {'category_name': category_name}, // サーバーに送信する値

dataType: 'json' // サーバーから返されるデータ型

}).done(function (response, textStatus, jqXHR) {

// サーバー側[php] echo json_encode(['status' => true or false]);

if (response.status) {

// 追加成功

alert('success.');

} else {

// 追加失敗

alert('error.');

}

}).fail(function (jqXHR, textStatus, errorThrown) {

// 通信失敗

alert('error.');

});

JavaScript 数字先頭に0を追加する関数のサンプルコード

JavaScript　数字の先頭に0を追加する関数のサンプルコードです。

<script>
console.log(digitFormat(1,3)); // 出力ログ:001
// 数字の先頭に0を追加してdigitで指定された桁数に変換する
function digitFormat(num, digit) {
var len = String(num).length;
if(digit > len) {
return (new Array((digit - len) + 1).join(0)) + num;
} else {
return num;
}
}
</script>

console.log(digitFormat(1,3)); // 出力ログ:001

// 数字の先頭に0を追加してdigitで指定された桁数に変換する

function digitFormat(num, digit) {

var len = String(num).length;

if(digit > len) {

return (new Array((digit - len) + 1).join(0)) + num;

} else {

return num;

}

</script>

JavaScript 日付と時刻チェック(YmdHi)関数のサンプルコード

JavaScript 日付と時刻チェック(YmdHi)関数のサンプルコードです。

// 日付と時刻チェックのサンプルコード
<script>
console.log(checkDate(2017,12,04));
console.log(checkTime(10,11));
// 日付チェック(戻り値: true or false)
// ex) Y:2017, m:12, d:04
function checkDate(Y, m, d) {
var m = parseInt(m, 10);
var d = parseInt(d, 10);
var check_date = Y+'/'+m+'/'+d;
var date = new Date(check_date);
if (　check_date == (date.getFullYear()+'/'+(date.getMonth()+1)+'/'+date.getDate())　)　{
return true;
} else {
return false;
}
}
// 時刻チェック(戻り値: true or false)
// ex) H:10, i:11
function checkTime(H, i) {
var H = parseInt(H, 10);
var i = parseInt(i, 10);
if (0 <= H && H <= 23 && 0 <= i && i <= 59) {
return true;
} else {
return false;
}
}
</script>