Question

    $.ajax({
      url: 'post/add_review/',
      data: data,
      type: "POST",
      dataType: 'json',
      success: function(e) {
      if (e.status)
      {
       alert("Review Success") 
    }

这就是我显示警报的方式。如何更改此警报框并使用另一个设计的警报

<style>
.alert {
    padding: 20px;
    background-color: #f44336;
    color: white;
}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}
</style>

<div class="alert">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

如何在html中使用此警报而非标准警报？

Answer 1

您可以使用它来显示/更新您的消息：

<div class="alert">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>


 $.ajax({
      url: 'post/add_review/',
      data: data,
      type: "POST",
      dataType: 'json',
      success: function(e) {
      if (e.status)
      {
       $( ".alert" ).html( "Review Success" );
      }

 });

Answer 2

使用课程hidden并使用addClass/removeClass切换容器的显示。

$.ajax({
  url: 'https://dog.ceo/api/breeds/list', // dummy url
  //data: data,
  type: "POST",
  dataType: 'json',
  success: function(e) {
    if (e.status) {
      // if true then show the div container and append the status in this div
      $(".alert").removeClass("hidden").html(e.status);
    }
  }
})

.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert hidden">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

Answer 3

您可以使用jQuery UI Dialog。

https://jsfiddle.net/tanvisurve/ge2o3573/2/

<body>
<div>
<input id="txtInput" name="txtInput" type="text" />
<button type="button" id="btnGo" name="btnGo">Go</button>
</div>
<div id="divModalDialog" title="Go" hidden="hidden"></div>
</body>

$(function(){
 $("#btnGo").click(function(){
  $("#divModalDialog").html($("#txtInput").val());
  $( "#divModalDialog" ).dialog();
 });
});

它可能会解决您的问题。

我如何设计警报而不是工作警报？

3 个答案: