Home / Questions / 94842
Accepted
Shassain
Asked: 2020-08-14 18:53:05 +0800 CST 2020-08-14 18:53:05 +0800 CST

JavaScript alert() 或 confirm() 的 CSS

  • 772

我希望您帮我将 css 提供给和alert()javascript ，以便我的消息有点优雅，我不想选择仅用于确认的模式，所以如果有人知道我是如何做到的，我将不胜感激。confirm()

$("#confirm").click(function(){
  var bool=confirm("Seguro de eliminar el dato?");
  if(bool){
    alert("se elimino correctamente");
  }else{
    alert("cancelo la solicitud");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="confirm">confirmar eliminacion</button>

javascript

10 Answers

  1. Best Answer

    不幸的是，这是不可能的。

    和由浏览器创建alert，它们的视觉风格完全取决于浏览器。promptconfirm

    浏览器示例：

    铬合金

    铬合金

    边缘

    边缘

    火狐

    火狐

    IE浏览器

    IE浏览器

    它们不是 DOM 的一部分，因此无法通过 CSS 或 JavaScript 设置样式。

    您唯一能做的就是您提到的您不想要的：使用您选择的库中的模式或自己编写代码。

    • 28

  2. 无法应用 css 规则来编辑alert()or confirm()。

    我推荐你Bootbox.js，虽然它们是模态的，但它们非常易于使用，并且还具有确认功能。

    bootbox.confirm({
    title: "Eliminar Datos",
    message: "Seguro de eliminar el dato?.",
    buttons: {
        cancel: {
            label: '<i class="fa fa-times"></i> Cancelar'
        },
        confirm: {
            label: '<i class="fa fa-check"></i> Confirmar'
        }
    },
    callback: function (result) {
        bootbox.alert({
            message: 'Resultado: ' + result
        })
    }
});
    • 9

  3. 有一个非常好的库AlertifyJS。

    它具有响应性并使用 jQuery，因此几乎所有旧浏览器都支持它。只需这些代码行，您就可以做出一个不错的功能性提交。

    alertify.confirm("This is a confirm dialog.",
  function() {
    alertify.success('Ok');
  },
  function() {
    alertify.error('Cancel');
  }
);
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/build/css/alertify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/alertify.min.js"></script>

    • 7

  4. 我推荐你使用sweet alert，查看链接：http ://t4t5.github.io/sweetalert/

    function delete(id){
   swal({
    title: Eliminar,
    text: Deseas Eliminar el registro?,
    showCancelButton: true,
    confirmButtonColor: '#f7505a',
    cancelButtonColor: '#f7505a',
    confirmButtonText: 'OK',
    cancelButtonText: 'NO'

}).then(function() {
    swal'Registro Eliminado';
})

    }

    扩展答案，下载库并调用您的函数。注意：在链接中有更多使用示例。

    • 6

  5. 你可以使用 SweetAlert 非常友好

    $('#btnPromt').click(function(){
    swal({
        title: "Seguro que quieres hacer esto?",
          text: "Esta acción ya no se podrá deshacer, Así que piénsalo bien.",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Si, estoy seguro',
          cancelButtonText: "Cancelar"
        });
});
    <link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.8.0/sweetalert2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.8.0/sweetalert2.min.js"></script>
<button id="btnPromt">Mostrar confirmacion</button>

    链接：网站

    • 4

  6. 您可以使用模态框发送警报，您可以根据自己的喜好设计一个模态框，它在所有浏览器中看起来都一样。

    W3S 模态

    // Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");
var btnSi = document.getElementById("myBtnSi");
var btnNo = document.getElementById("myBtnNo");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// Get the button that opens the modal
var mensaje = document.getElementById("myMensaje");

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
    mensaje.textContent  = "Seguro de eliminar el dato?";
    btnSi.style.display = "block";
    btnNo.style.display = "block";
}

btnSi.onclick = function() {
    mensaje.textContent  = "se elimino correctamente";
    btnSi.style.display = "none";
    btnNo.style.display = "none";
}

btnNo.onclick = function() {
    mensaje.textContent  = "cancelo la solicitud";
    btnSi.style.display = "none";
    btnNo.style.display = "none";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
    /* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
    <!DOCTYPE html>
<html>
<head>
</head>
<body>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Eliminar</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p id="myMensaje"></p>
    <button id="myBtnSi">Aceptar</button>
    <button id="myBtnNo">Cancelar</button>
  </div>

</div>

</body>
</html>

    • 3

  7. 看，如果您希望通过此方法覆盖全部功能( Alert() ; confirm () )

    你可以做的是覆盖函数，直接你所做的是覆盖所说的方法。

    function alert(message) { 
    console.info(message);
}

    问候。

    • 3

  8. 不幸的是，您不能从浏览器中模拟，您只能模拟我通常使用的一个框架：Alertify JS

    这是它的英文文档： alertifyjs

    这是一个简单的例子：

    if(!alertify.myAlert){
  //define a new dialog
  alertify.dialog('myAlert',function(){
    return{
      main:function(message){
        this.message = message;
      },
      setup:function(){
          return { 
            buttons:[{text: "cool!", key:27/*Esc*/}],
            focus: { element:0 }
          };
      },
      prepare:function(){
        this.setContent(this.message);
      }
  }});
}
//launch it.
alertify.myAlert("Browser dialogs made easy!");

    如果您想查看示例，请查看此处： 示例

    • 1

  9. 我建议你使用引导框架来给你的样式，我给你一个例子：

      <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

    问候。

    • 0

  10. 是的，您可以，但是您必须使用 alert() 和 confirm() 函数，这是我为 jQuery 制作的示例。

    其中“msg”是您需要的消息，“type”是一个简单的类，您可以使用它来绘制警报。

    function alert(msg, type){
    var html =  '<div class="alertContainer '+type+'">\n';
    html +=     '   <div class="mensajeAlert">'+msg+'</div>\n';
    html +=     '   <div class="cerrarAlert">x</div>\n';
    html +=     '</div>';
    jQuery('body').append(html);
    window.setTimeout(function(){jQuery('.alertContainer').addClass('active')}, 500);
    jQuery('.cerrarAlert').click(function(){
        jQuery('.alertContainer').removeClass('active');
        window.setTimeout(function(){jQuery('.alertContainer').remove()}, 500);
    });
}

alert('Este es un mensaje de error', 'error');
    .alertContainer{
    width:400px;
    height:100px;
    border:10px;
    text-align:center;
    color:#fff;
    font-size:14px;
    position:fixed;
    top:50%;
    left:50%;
    margin-left:-200px;
    margin-top:-50px;
    padding:30px;
    z-index: 10000;
    border-radius:3px;
    opacity: 0;
    transform: translateY(-50px);
    transition:all ease .3s;
}
.alertContainer.error{
    background:rgb(202, 80, 80);;
}
.alertContainer.warning{
    background:#FB9E57;
}
.alertContainer.info{
    background:#847DA2;
}
.alertContainer .cerrarAlert{
    position: absolute;
    width:20px;
    height:20px;
    border-radius:100px;
    background:#3a3a3a;
    border:2px solid #fff;
    text-align: center;
    line-height: 12px;
    top:-10px;
    right:-10px;
    box-shadow: 0px 0px 10px -2px #333;
    cursor: pointer;
    font-family:'Lato', sans-serif;
}
.alertContainer.active{
    transform: translateY(0px);
    opacity: 1;
}
.alertContainer .mensajeAlert{
    font-size:16px;
    vertical-align: middle;
    display: inline-block;
    font-family:'Lato', sans-serif;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

    在 Confirm 的情况下，它是相同的，但是添加了一个按钮，confirm 是布尔类型（True 或 False）。

    • 0