詳しい人求む！

formのsubmitを押すとモーダルを表示させたい

締切済

質問者：けんぼーちゃん
質問日時：2017/02/23 18:32
回答数：1件

formのsubmitを押すと別サイトに飛ぶのですが、飛ばさないでモーダルで表示させたいです。
使用しているのは『remodal』というJqueryです。
下記URLで質問されていることとまったく同じことがしたいのですが、
知識不足すぎて回答の意味も理解できません。どうか詳細に教えてくださいませ！

https://teratail.com/questions/2860

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

参考程度に

No.1

回答者： fujillin
回答日時：2017/02/24 13:58

こんにちは

＞知識不足すぎて回答の意味も理解できません。
＞どうか詳細に教えてくださいませ！
失礼な言い方になってしまいますが、どこがわからないかを説明できないと、紙面がいくらあっても足りなくなることが懸念されます。

設置はできているけれど、トリガーをsubmitに変えることができないということでしょうか？
であれば、単純化したHTMLソース等を提示なさった方が、回答が付きやすいと思います。
あるいは、設置もまだということなのでしょうか？
ご質問の内容は、『submit時に疑似モーダルウィンドウを表示させたい』ということと思いますが、なさりたいことはそれで全てが終わりというものではないのではないかと想像します。

submit時なので、例えば、入力内容の確認用にウィンドウを表示させたいような場合を想定してみると、入力内容を表示内容に反映させる必要がありそうですが、そのあたりは問題なくできているのでしょうか？
さらにには、確認後ユーザが訂正をしたりＯＫしたりすることになりますが、その際の処理の切り分けや次の処理への引き渡しなどもできているのでしょうか？

・・・などと言っているだけでは回答にならないので、以下に、ご質問文通りでsubmit時に表示する例を。
内容的には、配布サイト等で示されいる典型的な例をほぼそのまま使用しています。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>TEST</title>

<link rel="stylesheet" href="http://on-ze.com/demo/jquery-remodal/remodal.css">
<link rel="stylesheet" href="http://on-ze.com/demo/jquery-remodal/remodal-def …
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2. …
<script type="text/javascript" src="http://on-ze.com/demo/jquery-remodal/remodal.js" …

<script type="text/javascript">
$(function(){
var modal = $(".remodal").remodal();
$("#form1").on("submit", function(){
modal.open(); return false;
});
});
</script>
</head>
<body>

<form id="form1">
<p>フォームの内容</p>
<input type="submit" value="submit" />
</form>

<div class="remodal" data-remodal-id="modal">
<button data-remodal-action="close" class="remodal-close"></button>
<h3>タイトル</h3>
<p>表示内容</p>
<button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
<button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

</body>
</html>

※ そのままでも動作するように、JS、CSSはONZEのサイトのものを臨時に借用しています。
　実際の利用では、自サイトに正しく設定し直してください。
　また、このサイトではURLが省略表示されてしまいますので、ご注意を。
※ 付け加えたJSはたかだか数行ですので、説明は省略しました。

- 0
- 件

通報する

この回答へのお礼

fujillin様
お返事が遅れて申し訳ございません。
説明不足で大変お手数をお掛けしました。
ご回答いただいた内容で試してみましたが、思っている動作通りにはいきませんでした。
実は・・こちらでしばらく回答がつかなかったため、teratailでも同様のご質問をさせていただいておりました。

teratailでも説明不足だとご指摘があり、追加で説明を載せたところ回答を得られたのですが、
実現は難しいとの回答でした。（下記URL参照）
https://teratail.com/questions/67028

なので、別の方法を検討しようか考えているところです。。

通報する

お礼日時：2017/02/24 17:10

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！