按钮中的Css弹出警报，而不是输入文本

Question

我如何自定义css以便像这样弹出警报，而是在一个按钮中提示弹出焦点。

我在文本框中使用了这种验证

<div class="form-group">
<label class="control-label col-sm-3" for="judul_laporan">Judul Laporan </label>
    <div class="col-sm-5">
         <input type="email" class="form-control" id="judul_laporan" >
     <span style="color: red" id="warnlaporan"></span>
    </div>
</div>

<button type="button" id="save_laporan"></button>

JQuery的

 $("#save_laporan").click(function(){    
  var judul_laporan = $('input[name="judul_laporan"]'); 
  if(judul_laporan.val() == ''){
    judul_laporan.parent().parent().addClass('has-error');
    $('#warnlaporan').text("Judul Laporan Belum Ada");
    judul_laporan.focus();
    result
  }else{
    judul_laporan.parent().parent().removeClass('has-error');
     $('#warnlaporan').text("");
  }

但我不知道如何制作像图像一样的弹出警报（它应该是按钮）

Answer 1

您可以看到x3schools'文档。它为您提供了div顶部的示例弹出窗口。

此代码打开一个弹出窗口：

var user_ctx = new user();
user_ctx
    .set_email(req.body.email)
    .then(() => user_ctx.set_username(req.body.username))
    .catch(err => console.log(err));

function user () {
    this.user = {};
};

user.prototype.set_email = function(email) {
    var self = this;
    var email_ctx = new email_lib(email);
    return email_ctx
        .is_valid()
        .then(function() {
           self.user.email = email;
        });
    });
};

user.prototype.set_username = function (username) {
    this.user.username = username;
};

// When the user clicks on <div>, open the popup
function myFunction() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
}

/* Popup container */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

你也可以使用microtip，它是一个漂亮的库，让你有机会创建简单的弹出窗口。这是唯一的声明：<div class="popup" onclick="myFunction()" style="left: 35px; top: 60px">Click me! <span class="popuptext" id="myPopup">Popup text...</span> </div>。但是，您必须在服务器中下载带有rpm的软件包（仅1kb）。