如何在javascript中创建自定义是没有警报

With built-in JavaScript, you get only three types of JavaScript alert popups, and those are :

使用内置JavaScript，您只会获得三种类型JavaScript警报弹出窗口，分别是：

• Alert Box
  警报框
• Confirm Box
  确认框
• Prompt Box
  提示框

Now, the problem with these predefined JavaScript alerts is, you can’t customize it, you can’t change the value or its design.

现在，这些预定义JavaScript警报的问题在于，您无法自定义它，无法更改其值或设计。

For example- if you make a confirm alert box in JavaScript, it’d make a confirmation box with an OK or Cancel box.

例如，如果您在JavaScript中创建一个确认警报框，它将在一个确认框中单击“确定”或“取消”。

Now suppose you are making a quiz or some sort of web application, and you want to make a JavaScript alert with a Yes or No box instead of Ok or Cancel box, how are you going to do it?

现在，假设您正在做一个测验或某种Web应用程序，并且想用“是”或“否”框而不是“确定”或“取消”框来发出JavaScript警报，您将如何做？

Sadly, you can’t. though you can make custom alert boxes within the webpage with HTML, CSS, and JavaScript. but you won’t get alert boxes exactly like regular JavaScript alerts.

可悲的是，你不能。 尽管您可以使用HTML，CSS和JavaScript在网页中创建自定义提醒框。 但是您不会获得与常规JavaScript警报完全相同的警报框。

And a better way to make custom alerts is by using JavaScript frameworks.

制作自定义警报的更好方法是使用JavaScript框架。

So which JavaScript libraries I’m talking about?

那么我在说哪些JavaScript库？

Although there are many JavaScript frameworks, that you can use to make custom alerts easily.

尽管有许多JavaScript框架，但您可以使用它们轻松地创建自定义警报。

jQuery UI is a nice framework for such things.

jQuery UI是一个很好的框架。

For those of you who don’t know, you can make interactive web applications easily with jQuery.

对于不认识的人，您可以使用jQuery轻松制作交互式Web应用程序。

Let’s learn to make custom alerts by making a Yes or No alert box.

让我们学习通过制作是或否警报框来制作自定义警报。

那么如何制作是或否警报框？ (So how to make a Yes or No alert box?)

First, import the jQuery UI framework via CDN.

首先，通过CDN导入jQuery UI框架。

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Now, make an input box in HTML and give it a unique id, and then make a div where we will show the alert. and also assign it a unique id.

现在，在HTML中创建一个输入框并为其指定唯一的ID，然后在div中显示警报。 并为其分配一个唯一的ID。

<input type="button" id="box" value="Tell about yourslef"/><div id="dialog-confirm"></div>

Now copy and paste this code into the script tag of your HTML file. and run it in any browser.

现在，将此代码复制并粘贴到HTML文件的脚本标签中。 并在任何浏览器中运行它。

<script>$('#box').click(function buttonAction() {$("#dialog-confirm").html("Do you feel good about your self?");// Define the Dialog and its properties.$("#dialog-confirm").dialog({resizable: false,modal: true,title: "Click Yes or No based on your preference",height: 250,width: 400,buttons: {"Yes": function () {$(this).dialog('close');alert("Yes, I do");},"No": function () {$(this).dialog('close');alert("Nope, I don't");}}});});$('#box').click(buttonAction);</script>

Here in this script, we have made a dialog with two buttons names yes and no. Which will show only after you click the button with id ‘box’.

在此脚本中，我们创建了一个对话框，其中包含两个按钮，分别是yes和no。 仅在您单击ID为“ box”的按钮后，该选项才会显示。

You can learn more about how to customize these alert boxes in jQuery here: https://jqueryui.com/dialog/

您可以在此处了解有关如何在jQuery中自定义这些警报框的更多信息： https : //jqueryui.com/dialog/

翻译自: https://medium.com/javascript-in-plain-english/how-to-make-a-custom-yes-no-alert-in-javascript-6cd2de221e6c