モーダルウインドウ 「BOXER」で入力フォーム実装可能ですか

Question

###前提・実現したいこと
モーダルウインドウで入力フォーム（※名前などの入力）の実装をしたいです。
モーダルウインドウを幾つか検討していましたが、レスポンシブ対応（スマホ表示も必要なため）が可能で、
扱いやすい条件で幾つか検討していて、「BOXER」を使用したいと思いました。
現在だと名称も「Light Box」になったみたいですが、使用感がBOXERのほうがいいような記述も見つけて、
そちらを使用しておりました。

###発生している問題・エラーメッセージ

通常のモーダルの表示はうまく言ったのですが、
入力フォーム（input[type="txt"]）を使用している部分が、
表示がうまくいくのですが、テキストの入力ができない状態ですた。
単純にコンテンツをz-indexで重なり順を調整すればよいのかとも思いましたが、
それではうまくいきませんでした。

可能であれば、css,jsの調整での対処を望んでいますが、
そもそもBOXERで対応できないよという場合もあると思いますので、
その場合は別のオススメのモーダルウインドウを教えていただきたいです。

条件：レスポンシブ対応、入力フォーム、見た目の良さ

個人的には「Magnific Popup 」も良さげではと検討していますが、
時間的に実証は出来ておりませんので、使用者のコメント等も参考でいただけると助かります。

###該当のソースコード

http://www.imagegarden.jp/client/softplan/smaroku/www/search/test.html
検証ページ（※リンク先はテストページです。）

「BOXER」https://github.com/FormstoneClassic/Boxer
「Magnific Popup 」http://dimsemenov.com/plugins/magnific-popup/

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
HTML5、js、css モーダルに関連したjQuery等の使用

Comments

[kei344]

プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）また、問題再現のためのコードは書いてください。

[katsumi_garden]

実証サイトを追記しております。

[kei344]

検証ページの「未入力」をクリックして、文字を入力して、モーダルが閉じるところまでWindows/Firefoxでできました。使用されている環境はなにでしょうか。

[katsumi_garden]

MAC/Safariをメインで使ってて、うまくいかない状態でした。返信みて他環境で確認してみましたが、確かに正常に機能しますね・・・。

Answer 1

BOXERは利用したことがありません。
僕自身の話ですが、MaterializeというCSSフレームワーク（レスポンシブ、マテリアルデザイン対応）をよく利用しており、
Materializeのモーダルに入力フォーム乗せて問題なく利用できてます。

そういえば記述ミス？
input[type="txt"]ではなくinput[type="text"]では？質問書く際のタイプミスならすみません。
紹介サイト（http://kwski.net/jquery/1201/）をざっと見た感じHTMLでモーダルがあがるので普通に乗せられそうなもんですが・・・
modalの親divの中に記述してあればz-indexは関係なさそうですし。

Comments

[katsumi_garden]

早速のご返信ありがとうございます。

実装されたことのあるフレームワークのご紹介ありがとうございます。
検証してみたいと思います。

また、ご指摘の下記記述部分
input[type="txt"]ではなくinput[type="text"]
は直接的な記述部分とは関係ありませんでした。質問文を慌てて書いていたための間違いでした。
誤解を招く表記で失礼しました。