以下のような形式のhtmlファイルがありました
<html>
<head>
<title>Create a product</title>
</head>
<body>
<form action="/submit/form/" method="POST">
<input name="text" placeholder="Email please"/>
<input name="" type="submit" class="btn btn-large big_btn " value="Save Changes">
<input id="cancel_profile_changes" name="" type="button" class="btn btn-large big_blkbtn hide_margtp_35_a " value="Cancel">
</form>
<body>
</html>
ユーザーは、それがにリダイレクトされますフォームを送信するとaction attribute url、しかしwhanメッセージを開く必要がありますがポップアップダイアログキャンセルをユーザーがクリックするAre u sure u want to discard changesとをokしてcancel。
したがって、ユーザーがをクリックOkすると、URL/dashboard/にリダイレクトされます。クリックするとcancel、リダイレクトせず、フォームデータを失うことなく同じページに表示されます。
では、Twitterブートストラップを使用して上記の機能を非常に簡単に実現するにはbootbox.js、これまでこの種の機能を使用していましたが、設計の実装のため、Twitterブートストラップのみを使用したいですか？
では、Twitterブートストラップを使用して上記の機能を実現するにはどうすればよいですか？
キャンセルボタンにモーダルを取り付けます。
<form action="/submit/form/" method="POST">
<input name="text" placeholder="Email please">
<input name="" type="submit" class="btn btn-large big_btn " value="Save Changes">
<input href="#modal-dialog" data-toggle="modal" id="cancel_profile_changes" type="button" class="btn btn-large big_blkbtn hide_margtp_35_a" value="Cancel">
</form>
<div id="modal-dialog" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" data-dismiss="modal" aria-hidden="true" class="close">×</a>
<h3>Are you sure</h3>
</div>
<div class="modal-body">
<p>Do you want to discard changes?</p>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" id="btnConfirm" class="btn confirm">OK</a>
<a href="#" data-dismiss="modal" aria-hidden="true" class="btn secondary">Cancel</a>
</div>
</div>
</div>
</div>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加