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

CSS для JavaScript для оповещения() или подтверждения()

  • 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, promptи confirmсоздаются браузером, и их визуальные стили полностью зависят от браузера .

    Пример браузера:

    Хром

    Хром

    Край

    Край

    Fire Fox

    Fire Fox

    интернет-исследователь

    интернет-исследователь

    Они не являются частью DOM и поэтому не могут быть оформлены с помощью CSS или JavaScript.

    Единственное, что вы можете сделать, это именно то, что вы упомянули, что не хотите: использовать модальное окно из выбранной вами библиотеки или написать код самостоятельно .

    • 28

  2. Невозможно применить правила css для редактирования alert()или 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">

    В случае с подтверждением то же самое, но с добавлением кнопки, подтверждение имеет логический тип (True или False).

    • 0