Jquery 显示twitter引导确认对话框弹出窗口_Jquery_Twitter Bootstrap_Popup_Modal Dialog_Confirm

Jquery 显示twitter引导确认对话框弹出窗口

jquery twitter-bootstrap

Jquery 显示twitter引导确认对话框弹出窗口,jquery,twitter-bootstrap,popup,modal-dialog,confirm,Jquery,Twitter Bootstrap,Popup,Modal Dialog,Confirm,我有一个html文件，格式如下 <html> <head> <title>Create a product</title> </head> <body> <form action="/submit/form/" method="POST"> <input name="text" placeholder="Email please"/>

我有一个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>


创建产品

当用户提交表单时，它将重定向到

操作属性url

，但当用户单击“取消”时，将打开一个弹出对话框，其中会显示一条消息

您确定要使用确定
和取消
放弃更改吗
因此，当用户单击确定
，他应该被重定向到url/dashboard/，
如果他单击“取消”

，那么他应该在同一页面上，而不会重定向，也不会丢失表单数据

因此，如何通过twitter引导轻松实现上述功能，到目前为止，我一直在使用

bootbox.js

实现这类功能，但由于设计实现的原因，我只想使用twitter引导

那么，如何使用twitter引导功能实现上述功能呢？

请尝试以下方法

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


×
模态头
一个好身体
接近
保存更改

FMI:

将模式连接到取消按钮

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


你确定吗？
是否要放弃更改

演示：