2013-10-01 73 views
0

我创建了一个简单的JavaScript警告添加模式确认或删除

if (confirm('Are you sure you want to remove this item?')) { 
     swoosh(id, path+'swoosh_config/swoosh_delete_jobtitle', 'jobtitledv') 
    } 

,我把它变成一个模式。

$('#delete').modal('show'); 

,这里是我的新警报

<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-haspopup="true" aria-hidden="true"> 
    <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="alert alert-info fade in" id="alert"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
        <h4>Heads Up!</h4> 
        <p>What you are doing will delete a data!</p> 
       </div> 
      </div> 
    </div> 
</div> 

我如何将添加一个确认按钮,将导致我说,“旋风”再加上它的链接?

+0

http://jqueryui.com/dialog/#modal-confirmation也许可以帮助你 – aleation

回答

0

看到jquery dialog confirmation box

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Dialog - Modal confirmation</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <script> 
    $(function() { 
    $("#dialog-confirm").dialog({ 
     resizable: false, 
     height:140, 
     modal: true, 
     buttons: { 
     "Delete all items": function() { 
      $(this).dialog("close"); 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
     } 
    }); 
    }); 
    </script> 
</head> 
<body> 

<div id="dialog-confirm" title="Empty the recycle bin?"> 
    <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p> 
</div> 

<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> 


</body> 
</html>