单击引导按钮时提供用户选项

时间:2017-05-12 09:54:48

标签: javascript php twitter-bootstrap echo

echo "<a href=\"delete.php?id=$result[exportid]\"><button type='button' class='btn btn-danger btn-xs glyphicon glyphicon-remove-circle'></button></a>";

上面的按钮加载delete.php

当用户点击按钮时,我想显示是/否窗口。如果用户单击是,则需要加载delete.php(带有id信息)。单击否时,需要加载其他php文件。

这是一个很好的方法吗?我尝试过使用JavaScript但无法使用它。

2 个答案:

答案 0 :(得分:0)

1st无需在链接中添加按钮,只需设置链接样式:

echo "<a href=\"delete.php?id=$result[exportid]\" class='btn btn-danger btn-xs glyphicon glyphicon-remove-circle delete-button'></a>";

然后在javascript(jquery)中附加按钮点击事件并显示确认信息:

$(function(){
    $('a.delete-button').click(ev){
        ev.preventDefault();
        var deleteUrl = $(this).attr('href');
        var otherUrl = 'some other url';
        if(confirm('Are you sure you want to delete this item')){
             window.location = deleteUrl;
        }else{
             window.location = otherUrl;
        }
    }
});

答案 1 :(得分:0)

您可以轻松地进行如下确认对话:

<!-- Modal dialog -->
<div class="modal fade" id="myForm" tabindex="-1">
    <!-- CUTTED -->
    <div id="step1" class="modal-footer">
      <button type="button" class="glyphicon glyphicon-erase btn btn-default" id="btnDelete"> Delete</button>
    </div>
</div>

<!-- Modal confirm -->
<div class="modal" id="confirmModal" style="display: none; z-index: 1050;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body" id="confirmMessage">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="confirmOk">Ok</button>
                <button type="button" class="btn btn-default" id="confirmCancel">Cancel</button>
            </div>
        </div>
    </div>
</div>

档案.js:

$('#btnDelete').on('click', function(e){
    confirmDialog(YOUR_MESSAGE_STRING_CONST, function(){
        //My code to delete
    });
});

function confirmDialog(message, onConfirm){
    var fClose = function(){
        modal.modal("hide");
    };
    var modal = $("#confirmModal");
    modal.modal("show");
    $("#confirmMessage").empty().append(message);
    $("#confirmOk").one('click', onConfirm);
    $("#confirmOk").one('click', fClose);
    $("#confirmCancel").one("click", fClose);
}

使用one代替on可以防止在下一次打开对话框时调用删除功能。

我希望这可能有所帮助。

按照完整的文字示例:

&#13;
&#13;
var YOUR_MESSAGE_STRING_CONST = "Your confirm message?";
$('#btnDelete').on('click', function(e){
  confirmDialog(YOUR_MESSAGE_STRING_CONST, function(){
    //My code on OK click
  });
});

function confirmDialog(message, onConfirm){
  var fClose = function(){
  modal.modal("hide");
  };
  var modal = $("#confirmModal");
  modal.modal("show");
  $("#confirmMessage").empty().append(message);
  $("#confirmOk").one('click', onConfirm);
  $("#confirmOk").one('click', fClose);
  $("#confirmCancel").one("click", fClose);
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Modal dialog -->
<div id="frmTest" tabindex="-1">
  <!-- CUTTED -->
    <div id="step1" class="modal-footer">
  <button type="button" class="glyphicon glyphicon-erase btn btn-default" id="btnDelete"> Delete</button>
</div>
</div>

<!-- Modal confirm -->
<div class="modal" id="confirmModal" style="display: none; z-index: 1050;">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-body" id="confirmMessage">
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" id="confirmOk">Ok</button>
          <button type="button" class="btn btn-default" id="confirmCancel">Cancel</button>
        </div>
  </div>
</div>
</div>
&#13;
&#13;
&#13;