Display Twitter Bootstrap подтвердить диалоговое всплывающее

я имел HTML файл с формой, как показано нижеDisplay Twitter Bootstrap подтвердить диалоговое всплывающее

<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 bootstrap очень легко, Я использую bootbox.js для такого рода функциональных возможностей до сих пор, но из-за дизайнерских реализаций я хочу использовать только твитер-бутстрап?

так как достичь вышеуказанных функций с помощью twitter bootstrap?

источник

2013-11-11 shiva krishna

Приложить модальным к кнопке отмены ..

<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

источник

2013-11-11 13:47:22 ZimSystem

Попробуйте следующий раз ..

<!-- 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: http://getbootstrap.com/2.3.2/javascript.html#modals

источник

2013-11-11 12:13:32 Raghuveer

Display Twitter Bootstrap подтвердить диалоговое всплывающее

ответ

Смежные вопросы