スナックelve 本店

バツイチ40代女の日記です

トップ > JavaScript > SimpleModal　20200926現在の概要

SimpleModal　20200926現在の概要

JavaScript jQuery

＜追記＞
サンプル動かしてたらモバイルで読み込み失敗するようになったので削除しました。ご迷惑おかけしてすみません。
＜/追記＞
www.ericmmartin.com

google先生に訳してもらいます。怒られたら消します(；´Д｀)

概要

SimpleModalは、モーダルダイアログ開発のための強力なインターフェイスを提供する軽量のjQueryプラグインです。モーダルダイアログフレームワークと考えてください。 SimpleModalは、UI開発に固有の関連するクロスブラウザーの問題からユーザーを保護しながら、想像できるものを何でも構築する柔軟性を提供します。

使用法

SimpleModalは、モーダルダイアログを呼び出す2つの簡単な方法を提供します。
チェーンされたjQuery関数として、jQuery要素でmodal（）関数を呼び出すことができ、その要素のコンテンツを使用してモーダルダイアログが表示されます。例えば：

$("#element-id").modal();

スタンドアロン関数として、モーダルダイアログは、jQueryオブジェクト、DOM要素、またはプレーン文字列（HTMLを含むことができます）を渡すことで作成できます。例えば：

$.modal("<div><h1>SimpleModal</h1></div>");

上記の両方のメソッドは、オプションのオプションオブジェクトも受け入れます（早口言葉ですね）。上記の例を使用すると：

$("#element-id").modal({options});
$.modal("<div><h1>SimpleModal</h1></div>", {options});

SimpleModalはよりモーダルなダイアログフレームワークであるため、上記の両方の例では、非常に基本的なスタイルのないモーダルダイアログが作成されます。スタイリングは、外部CSSまたはオプションオブジェクトのプロパティを介して実行できます。使用可能なオプションの詳細なリストについては、以下の「オプション」セクションを参照してください。

スタリング

スタイルは、外部CSS、オプションオブジェクト、またはその両方を介して適用できます。モーダルオーバーレイ、コンテナ、およびデータ要素のCSSオプションは、overlayCss、containerCss、およびdataCssです。これらはすべて、プロパティのキー/値オブジェクトを取ります。詳細については、jQueryCSSドキュメントを参照してください。

SimpleModalは、モーダルダイアログを表示するために必要なCSSの設定を処理します。さらに、SimpleModalは、優先される位置オプションが使用されていない限り、モーダルダイアログを動的に中央に配置します。

SimpleModalは、次のCSSクラスを内部的に定義します：simplemodal-overlay、simplemodal-container、simplemodal-wrap（SimpleModalは、コンテンツがコンテナーより大きくなると、オーバーフローを自動的にautoに設定します）、simplemodal-data。

＊注：SimpleModalのデフォルトのcloseHTMLオプションは、ダイアログを閉じるための画像を表示するために、modalCloseImgクラスを宣言します。画像をダウンロードします。オプションで定義されているため、オプションでスタイルを設定することはできません。外部CSS定義が必要です。
＜中略＞

オプションとコールバック

オプション

以下は、現在のオプションのリストです。デフォルト値は次のように示されます：[Type：Value]

  • appendTo [String:'body']

要素を追加するjQueryセレクター。 ASP.NETの場合は、'form'を使用します

  • focus [Boolean:true] (Changed in 1.4)

最初に表示され、有効になっている要素に焦点を合わせますか？

  • opacity [Number:50]

オーバーレイdivの不透明度の値（0〜100）

  • overlayId [String:'simplemodal-overlay']

オーバーレイdivのDOM要素ID

  • overlayCss [Object:{}]

オーバーレイdivのCSSスタイル

  • containerId [String:'simplemodal-container']

コンテナdivのDOM要素ID

  • containerCss [Object:{}]

コンテナdivのCSSスタイル

  • dataId [String:'simplemodal-data']

The DOM element id for the data div

  • dataCss [Object:{}]

データdivのDOM要素ID

  • minHeight [Number:null]

コンテナの最小高さ

  • minWidth [Number:null]

コンテナの最小幅

  • maxHeight [Number:null]

コンテナの最大高さ。指定しない場合、ウィンドウの高さが使用されます。

  • maxWidth [Number:null]

コンテナの最大幅。指定しない場合は、ウィンドウ幅が使用されます。

  • autoResize [Boolean:false] (Changed in 1.4)

ブラウザウィンドウのサイズを超える場合は、コンテナのサイズを変更しますか？

  • autoPosition [Boolean:true] (Changed in 1.4)

作成時およびウィンドウのサイズ変更時にコンテナを自動的に配置しますか？

  • zIndex [Number: 1000]

開始時z-index値

  • close [Boolean:true]

trueの場合、closeHTML、escClose、overlayCloseが設定されている場合に使用されます。 falseの場合、それらはいずれも使用されません。

  • closeHTML [String:'']

デフォルトのクローズリンクのHTML。 SimpleModalは、closeClassをこの要素に自動的に追加します。

  • closeClass [String:'simplemodal-close']

closeイベントへのバインドに使用されるCSSクラス

  • escClose [Boolean:true]

Escキーを押してダイアログを閉じることを許可しますか？

  • overlayClose [Boolean:false]

オーバーレイをクリックしてダイアログを閉じることを許可しますか？

  • position [Array:null]

コンテナの位置[上、左]。ピクセル数またはパーセンテージにすることができます

  • persist [Boolean:false]

モーダルコール間でデータを永続化しますか？既存のDOM要素にのみ使用されます。 trueの場合、データはモーダルコール間で維持され、falseの場合、データは元の状態に戻ります。

  • modal [Boolean:true] (Added in 1.3.4. Name changed from transient in 1.3.5))

ユーザーは、ダイアログから離れたモーダルまたはタブの下のページを操作できなくなります。 falseの場合、オーバーレイ、iframe、および特定のイベントが無効になり、ユーザーはダイアログの下のページを操作できるようになります。

  • onOpen [Function:null]

SimpleModalのopen時に使用されるコールバック関数

  • onShow [Function:null]

モーダルダイアログが開いた後に使用されるコールバック関数

  • onClose [Function:null]

SimpleModalのclose時に使用されるコールバック関数
＜中略＞

コールバック

コールバック関数は、JavaScriptの適用関数を使用して呼び出されます。オーバーレイ、コンテナ、データ、iframeオブジェクトを含む1つのパラメータであるダイアログオブジェクトが送信されます。さらに、コールバック内で、これはSimpleModalオブジェクトを参照します。これにより、使用可能なすべてのモーダル要素と関数にアクセスできます。

  • onOpen：モーダルダイアログ要素の開始に効果を追加するのに便利です。 SimpleModalは、必要に応じてiframeの"showing"を処理します。
  • onShow：モーダルダイアログ要素が表示された後に実行する可能性のあるイベントやその他のアクションをバインドするのに便利です。モーダルダイアログに別のプラグイン（TinyMCE、DatePickerなど）を含める場合は、ここでそのプラグインを初期化します。
  • onClose：モーダルダイアログ要素の終了に効果を追加するのに便利です。エフェクトなどを適用した後、$.modal.close（）;を呼び出す必要があります。そして、SimpleModalはデータを正しく再挿入し、ダイアログ要素をクリーンアップできます。

ここまで。

サンプル

<div id='content'>
    <div id='basic-modal'>
        <h3>Basic Modal Dialog</h3>
        <p>cssなしで何か表示してみましょう</p>
        <input type='button' name='basic' value='Demo' class='basic'/> 
    </div>
    
    <!-- modal content -->
    <div id="basic-modal-content" style='display:none'>
        <h3>Basic Modal Dialog</h3>
        <p>背景を暗くして、透明度３０で周囲をクリックすると閉じる</p>
        <p>閉じる文字列は「close」</p>
    </div>
</div>
<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/simplemodal/1.4.4/jquery.simplemodal.min.js"></script>
<script type="text/javascript">
jQuery(function ($) {
	// Load dialog on click
	$('#basic-modal .basic').click(function (e) {
        $('#basic-modal-content').modal({
            overlayClose:true,
            opacity: 30,
            overlayCss: { backgroundColor: "#000" },
            closeHTML: "<a href='#'>Close</a>",
            minHeight:300,
　        minWidth :300,
	　containerCss:{
		backgroundColor:"#fff", 
		borderColor:"#fff", 
		padding:10, 
	　}
            
        });
		return false;
	});
});
</script>