我想在更新现有记录时使用bootstrap alert来显示成功消息。 这就是我所拥有的：
的index.php
$(document).ready(function(){ $("#submit_button").click( function() { $.post( $("#updateunit").attr("action"), $("#updateunit :input").serializeArray(),function(info){ $("#result").html(info); }); }); $("#updateunit").submit( function() { return false; }); }); function clearInput() { $("#updateunit :input").each( function() { $(this).val(''); }); } edit.php
prepare("UPDATE tblunitreservation SET reservation_code = :reservation_code, transaction_code = :transaction_code, notes = :notes WHERE transaction_id = :transaction_id"); $update->execute(array(':reservation_code' => $reservation_code, ':transaction_code' => $transaction_code, ':notes' => $notes, ':transaction_id' => $transaction_id)); echo 'Successfully updated record!'; } else { echo 'Required field/s is missing'; } ?>
我希望警报消息位于屏幕的中央，但发生的情况是，当我不更新记录时，警报背景可见，然后我更新记录，这只是消息成功更新出现的时间。
如果我做对了，你需要两件事：
为此，您可以省略在HTML本身中添加alert和alert-success类。 将您的HTML更改为（以及对齐文本）：
相反，我们将添加该类，一旦放置文本内部，如：
$("#submit_button").click( function() { $.post( $("#updateunit").attr("action"), $("#updateunit :input").serializeArray(),function(info){ $("#result").html(info); //adding class $("#result").addClass("alert alert-success"); }); });
小提琴
如果你想让盒子居中，也可以使用bootstrap类：
$("#result").addClass("alert alert-success offset4 span4");
基于Bootstrap 2.3的网格系统 ，你可以有12列，所以为了使盒子居中，我们将从左边留下4列，这就是offset4作用，并使盒子的长度为4列，这就是span4确实。
小提琴2
如果我想在5秒钟后自动关闭警报消息怎么办？ 并在警报消息中显示关闭按钮
为了更顺畅的解决方案，您可以：
//adding a 'x' button if the user wants to close manually $("#result").html(''+info+''); //timing the alert box to close after 5 seconds window.setTimeout(function () { $(".alert").fadeTo(500, 0).slideUp(500, function () { $(this).remove(); }); }, 5000); //Adding a click event to the 'x' button to close immediately $('.alert .close').on("click", function (e) { $(this).parent().fadeTo(500, 0).slideUp(500); });
小提琴3