オリジナルポップアップ

Original:
C-take sinazugawa Nanimono Demonai

Creared by C-take

前提

今回作成したモジュールはコードを書いてからそのままプレビューを押してもページに反映されません。

一度保存する必要があります。module cssを使用している為です。

使い方

下記のインクルード文を使用します。

[include :shitake-crude-production:extension:modal-s
|id=u-id]]

code.1

[[include :shitake-crude-production:extension:modal-e]]

code.2

code.1とcode.2の間にポップアップに表示したい文を記述する事ができます。

code.1の引数idにはポップアップのIDを書き込みます。同じページ内に同じIDのポップアップがでないように注意して設定してください。またIDは必ず"u-"で始まるものをつけて下さい。

ポップアップを起動するボタンは下記で作る事ができます。

[#u-id-popup ポップアップ起動]

code.3

形式としては下記になります。

#<code.1で登録したID名>-popup ポップアップ起動]

format.1

また、javascriptによってご自身が登録したポップアップを出力する場合は現在のURLの末尾に

#<code.1で登録したID名>-popup

format.2

を追加し画面遷移してください。

なお、ポップアップに書き込めるコードに特に制約はありません。

例えば

ポップアップの中にタブが仕込めるか気になりませんか？

結論

このようにできます。

サンプル1

[[include :shitake-crude-production:extension:modal-s
|id=u-tabview]]
@@@@
[[tabview]]
[[tab 例えば]]
ダイアログの中にタブが仕込めるか気になりませんか？
[[/tab]]
[[tab 結論]]
このようにできます。
[[/tab]]
[[/tabview]]
[[include :shitake-crude-production:extension:modal-e]]

[#u-tabview-popup サンプル1]

code.4

本モジュールにはいくつかの標準機能があります。下記のclass名を持つdivをポップアップの中に書き込んでください。

content: ポップアップの文章の周りに余白を持たせます。

余白がありません。

余白があります。

サンプル2

[[include :shitake-crude-production:extension:modal-s
|id=u-content]]
余白がありません。
[[div class="content"]]
余白があります。
[[/div]]
[[include :shitake-crude-production:extension:modal-e]]

[#u-content-popup サンプル2]

code.5

title: タイトルとなるような大きな文字を格納します。

titleです

contentです。

サンプル3

[[include :shitake-crude-production:extension:modal-s
|id=u-title]]
[[div class="title"]]
titleです
[[/div]]
[[div class="content"]]
contentです。
[[/div]]
[[include :shitake-crude-production:extension:modal-e]]

[#u-title-popup サンプル3]

code.6

choicebox: この中に格納されたaタグ（リンク）は右寄せのボタンのような見た目になります。

[[a]],[source hoge]どちらの構文でも可

aタグ サンプルページに戻る

サンプル4

[[include :shitake-crude-production:extension:modal-s
|id=u-choicebox]]
[[div class="content"]]
[[a]],[source hoge]どちらの構文でも可
[[/div]]
[[div class="choicebox"]]
[[a]]aタグ[[/a]] [http://shitake-crude-production.wikidot.com/syntax-place:create-popup サンプルページに戻る]
[[/div]]
[[include :shitake-crude-production:extension:modal-e]]

[#u-choicebox-popup サンプル4]

code.7

confirm: 中に格納したaタグ（リンク）を青いボタンのような見た目にします。

[[a]],[source hoge]どちらの構文でも可

OK

サンプル5

[[include :shitake-crude-production:extension:modal-s
|id=u-confirm]]
[[div class="content"]]
[[a]],[source hoge]どちらの構文でも可
[[/div]]
[[div class="confirm"]]
[[a]]OK[[/a]]
[[/div]]
[[include :shitake-crude-production:extension:modal-e]]

[#u-confirm-popup サンプル5]

[[html]]
 
<script type="text/javascript">
function remotePop(){
window.parent.window.location.href="http://shitake-crude-production.wikidot.com/syntax-place:create-popup/offset/1/hidepage1_limit/1#u-confirm-popup"
}
</script>
<button onclick="remotePop()">htmlブロックからポップアップ</button>
[[/html]]

皆様の表現の参考になれば幸いです。