我有一个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
,但是如果用户点击取消,则应弹出一个弹出对话框,其中包含Are u sure u want to discard changes
消息ok
和{{1} }}
因此,当用户点击cancel
时,应将其重定向到网址Ok
,
如果他点击/dashboard/
,那么他应该在同一页面中而不会重定向而不会丢失表单数据
那么如何使用twitter bootstrap轻松实现上述功能,
到目前为止,我正在使用cancel
这种功能,但由于设计实现,我只想使用twitter bootstrap?
那么如何使用twitter bootstrap实现上述功能呢?
答案 0 :(得分:3)
将模态附加到取消按钮..
<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>
答案 1 :(得分:0)
尝试以下一次..
<!-- Button to trigger modal -->
<input id="cancel_profile_changes" name="" type="button" class="btn btn-large big_blkbtn hide_margtp_35_a " value="Cancel" data-toggle="modal" href="#myModal">
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<!-- this will close the popup -->
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<!-- here navigate to other page -->
<button class="btn btn-primary">Save changes</button>
</div>
</div>