Help us understand the problem. What is going on with this article?

jQueryのmodalプラグインmodaalを使ってみた。

More than 1 year has passed since last update.

modaalで簡単なモーダル実装

フロントをやっていると何かとモーダルが必要になります。
自前で組んでも良いですが、スマホ対応など意外とめんどくさかったりします。

そこで今回はmodaalというやつを使ってみました。

モーダル自体はむちゃくちゃ簡単に実装できるのですが、ajaxでのデータ取得ですこし詰まったのでログとして残します。

ダウンロードや基本的な使い方はこちらから
https://github.com/humaan/Modaal

coffeeで普段書いているので読み替えてください。

modalの実装

index.html
<a href="#modal_id" class="js-trigger-modal-open">モーダルオープン</a>

<div id="modal_id">
 <h1>モーダルタイトル</h1>
 <p>モーダルコンテンツ</p>
<div>
modal.coffee
$('.js-trigger-modal-open').modaal()

以上です。
超簡単!閉じるボタンすらいらない。

ajaxで取得してモーダルの中身を書き換える

今回はボタンに付与されている変数で簡単にurlを叩きたいと思います。

index.html
<a href="#modal_id" class="js_trigger_modal_open" var="1">モーダルオープン</a>

<div id="modal_id">
 <h1 class="js_modal_title">モーダルタイトル</h1>
 <p class="js_modal_content">モーダルコンテンツ</p>
<div>
modal.coffee
id = ""
$('.js_trigger_modal_open').click ->
 id = $(this).attr("var")

modal_setting = (id) ->
 url = location.pathname + "/hoge/" + id
 $.ajax(
  type: 'GET',
  url: url
 ).done (data) ->
  modal_title = data.title
  modal_content = data.content
  $(".js_modal_title").text(modal_title)
  $(".js_modal_content").text(modal_content)

$('.js-trigger-tiny-pattern-modal').modaal({
 before_open: ->
  modal_setting(id)
  return
})

before_openのオプションを使うことでモーダルを開く前にajax取得からmodalの中身書き換えまで行っています。

ポイントはmodaalメソッドを使う前に必要な情報をすべて入れることです。
ページがロードされるとすぐにmodaalがモーダルのパーツをDOMに追加するので関数の中でつかう変数などが定義されていないとエラーになってしまうからです。

k_0214
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした