Twitter Bootstrap 2モーダルフォームダイアログ
-
27-10-2019 - |
質問
次のダイアログフォームがあります。
<div class='modal' id='myModal'>
<div class='modal-header'>
<a class='close' data-dismiss='modal'>×</a>
<h3>Add Tags</h3>
</div>
<div class='modal-body'>
<form accept-charset="UTF-8" action="/tagging" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="mCNvbvoPFWhD7SoJm9FPDh+BcRvCG3d16P+oOFACPuc=" /></div>
<input id="tags_string" name="tags_string" type="text" value="luca" />
<input id="id" name="id" type="hidden" value="4f1c95fd1d41c80ff200067f" />
</form>
</div>
<div class='modal-footer'>
<div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div>
</div>
</div>
そして彼のJS:
<script>
//<![CDATA[
$(function() {
// wire up the buttons to dismiss the modal when shown
$("#myModal").bind("show", function() {
$("#myModal a.btn").click(function(e) {
// do something based on which button was clicked
// we just log the contents of the link element for demo purposes
console.log("button pressed: "+$(this).html());
// hide the dialog box
$("#myModal").modal('hide');
});
});
// remove the event listeners when the dialog is hidden
$("#myModal").bind("hide", function() {
// remove event listeners on the buttons
$("#myModal a.btn").unbind();
});
// finally, wire up the actual modal functionality and show the dialog
$("#myModal").modal({
"backdrop" : "static",
"keyboard" : true,
"show" : true // this parameter ensures the modal is shown immediately
});
});
//]]>
</script>
xをクリックすると、それはそうです <a class='close' data-dismiss='modal'>×</a>
, 、私は現在のページに私を置き去りにして、私はhampageに行きたいと思っています。
また、「タグを追加」ボットンもあります <div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div>
何もしないでください。キーボードの上にjaustをクリックして仕事をします。「タグの追加」をクリックしても同じことをします。
私はJSやフロントエンドのプログラムにそれほど熟練していないので、どんな助けも歓迎します。
解決
送信ボタンはフォームタグの外側にあります。
どのフォームを提出するかはわかりません。
JavaScriptを使用してフォームに接続します。
<div class='modal-body'>
<form id="modal-form" accept-charset="UTF-8" action="/tagging" data-remote="true" method="post">
<input name="something" value="Some value" />
</form>
</div>
<div class='modal-footer'>
<a id="modal-form-submit" class='btn btn-primary' href="#">Submit</a>
</div>
<script>
$('#modal-form-submit').on('click', function(e){
// We don't want this to act as a link so cancel the link action
e.preventDefault();
// Find form and submit it
$('#modal-form').submit();
});
</script>
As for the <a class='close' data-dismiss='modal'>×</a>
それはホームページにリンクするはずです、なぜ削除しないのですか data-dismiss='modal'
標準を使用して通常のリンクのように動作させる href='home.html'
.
Ajaxを使用してフォームを送信するための正しい方向に向けるための追加のコードを次に示します。
// Since we want both pressing 'Enter' and clicking the button to work
// We'll subscribe to the submit event, which is triggered by both
$('#modal-form').on('submit', function(){
//Serialize the form and post it to the server
$.post("/yourReceivingPage", $(this).serialize(), function(){
// When this executes, we know the form was submitted
// To give some time for the animation,
// let's add a delay of 200 ms before the redirect
var delay = 200;
setTimeout(function(){
window.location.href = 'successUrl.html';
}, delay);
// Hide the modal
$("#my-modal").modal('hide');
});
// Stop the normal form submission
return false;
});
他のヒント
を取得します 提出]ボタン 作業はフォーム内に置いてください。
<div class="modal">
<form id="modal-form" action="/tagging" data-remote="true" method="post">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>A Modal Form</h3>
</div>
<div class="modal-body">
<input name="something" value="Some value" />
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Cancel</a>
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</form>
</div>
ただし、これにより、モーダルの下部に予期しないマージンが追加されます。 Bootstrap 2.0.2が紹介しました modal-form
クラス これを修正するか、次のようなスタイル定義で自分で修正できます。
.modal > form {
margin-bottom: 0;
}
為に モーダルを閉じるときに別のページにリンクします 私はtheshellfishmemeと一緒に行きます
ホームページにリンクすることになっている×については、Data-dismiss = 'Modal'を削除し、標準のhref = 'home.html'を使用して通常のリンクのように動作させるだけではありません。
HTML5を使用すると、次のようなものを持つことができます。
<div class="modal" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Add Tags</h3>
</div>
<div class="modal-body">
<form id="my_form" accept-charset="UTF-8" action="/tagging" data-remote="true" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden" value="mCNvbvoPFWhD7SoJm9FPDh+BcRvCG3d16P+oOFACPuc=" />
</div>
<input id="tags_string" name="tags_string" type="text" value="luca" />
<input id="id" name="id" type="hidden" value="4f1c95fd1d41c80ff200067f" />
</form>
</div>
<div class="modal-footer">
<div class="btn btn-primary"><input name="commit" type="submit" value="Add tag" form="my_form" /></div>
</div>
</div>
これはHTML5で呼ばれます フォーム関連要素 すべてのブラウザ +古いブラウザをサポートする必要がある場合は、JavaScriptを使用する必要がありますが、JavaScriptをフォールバックとして使用できます:)
フォームを提出するための問題は、ブートストラップ独自のJSモーダルライブラリ(bootstrap -modal.js)内にあります-basicaly送信イベントは、行#204のために防止されています。 ev.preventDefault
(どうして?)。
私の解決策は追加することでした:
if(!$(e.target).parents('form'))
e.preventDefault();
しかし、私はそれがどのような問題を生み出すかわかりません。
参考までに、次のことを行うことができます(Jadeで書かれています):
.modal.hide.fadel
form.modal-form
.modal-header
button.close type='button' data-dismiss="modal" x
h3= t 'translation'
.modal-body
p hello
.modal-footer
button.btn data-dismiss="modal" href="#" = t 'close'
a.btn.btn-primary data-dismiss="modal" data-remote="true" href="#"= t 'form.submit'