gpt4 book ai didi

jquery - 显示 twitter bootstrap 弹出确认对话框

转载 作者:行者123 更新时间:2023-12-01 03:41:13 24 4
gpt4 key购买 nike

我有一个 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,但是当用户单击取消时,应该打开一个弹出对话框,并显示一条消息你确定要放弃吗使用确定取消更改

因此,当用户单击Ok时,他应该被重定向到网址/dashboard/,如果他点击取消,那么他应该位于同一页面,而不会重定向,也不会丢失表单数据

那么如何使用twitter bootstrap非常轻松地实现上述功能,到目前为止,我正在使用 bootbox.js 来实现这种功能,但由于设计实现,我只想仅使用 twitter bootstrap ?

那么如何使用 twitter bootstrap 来实现上述功能呢?

最佳答案

将模态附加到取消按钮..

<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>

演示:http://bootply.com/93435

关于jquery - 显示 twitter bootstrap 弹出确认对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19905829/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com