by Prashant Yadav

通过Prashant Yadav

如何使用Bootstrap4和ES6创建自定义确认框 (How to create a custom confirm box with Bootstrap4 and ES6)

We put lots of sweat into achieving a good design, but imagine a scenario where we have to use something which is styled default to browsers. It ruins our hard work as it changes browser to browser.

我们为实现一个好的设计付出了很多汗水，但是想象一个场景，我们必须使用浏览器默认样式的东西。 更改浏览器会破坏我们的辛苦工作。

Same happened with me: I had put lots of effort into creating a SPA but the client wanted a confirm box with business logic. Unfortunately, using the inbuilt confirm box was the only odd factor in the design. So I created a custom confirm box.

我也发生了同样的事情：我在创建SPA方面付出了很多努力，但是客户想要一个带有业务逻辑的确认框。 不幸的是，使用内置的确认框是设计中唯一的奇怪因素。 因此，我创建了一个自定义确认框。

Let us see how you can create your own custom confirm box with Bootstrap4 and ES6.

让我们看看如何使用Bootstrap4和ES6创建自己的自定义确认框。

A modal is a popup dialog that is available with Bootstrap. We can use its functionality to handle the popup and design it according to our needs. It has different methods which we can use to achieve our goal.

模态是Bootstrap可用的弹出对话框。 我们可以使用其功能来处理弹出窗口并根据需要进行设计。 它具有可用于实现目标的不同方法。

Check out the live demo here.

在此处查看现场演示。

• We are going to use Bootstrap4 modal for creating the popup dialog.
  我们将使用Bootstrap4模式创建弹出对话框。

• We will use the Javascript callback function to handle the response.

  我们将使用Javascript 回调函数来处理响应。

• As Bootstrap has a JQuery dependency, we will use it for events.
  由于Bootstrap具有JQuery依赖关系，因此我们将其用于事件。

引导模态方法 (Bootstrap Modal Methods)

.modal(options): Activates the content as a modal with the below options.

.modal(options)：使用以下选项将内容激活为模态。

.modal(“toggle”): Shows or Hides the modal based on its current state.

.modal(“ toggle”)：根据其当前状态显示或隐藏模态。

.modal(“show”): Opens the modal.

.modal(“ show”)：打开模态。

.modal(“hide”): Hides the modal.

.modal(“ hide”)：隐藏模态。

引导程序模式选项 (Bootstrap Modal Options)

{backdrop: true or false, default: true}: Should modal hide when clicked outside the modal.

{backdrop：是或否，默认值：true}：在模态外部单击时，模态应隐藏。

{ keyboard: true or false, default: true}: Should modal hide when a keyboard button is pressed.

{keyboard：true或false，默认值：true}：按下键盘按钮时是否应该模式隐藏。

{ show: true or false, default: true}: To show the modal when initialized.

{show：true或false，默认：true}：初始化时显示模态。

自举模式事件 (Bootstrap Modal Events)

.on(‘show.bs.modal’): When modal is about to be shown but it is not yet shown.

.on('show.bs.modal')：模态将要显示但尚未显示时。

.on(‘ shown.bs.modal’): When modal is shown.

.on('shown.bs.modal')：显示模态时。

.on(‘ hide.bs.modal’): When modal is about to be hidden but it is not yet hidden.

.on('hide.bs.modal')：模态将要隐藏但尚未被隐藏时。

.on(‘ hidden.bs.modal’): When modal is hidden.

.on('hidden.bs.modal')：模态隐藏时。

依存关系 (Dependencies)

Import all the dependencies using CDN.

使用CDN导入所有依赖项。

We will now create a function that will generate our confirm box with our custom message and return the output selected by the user.

现在，我们将创建一个函数，该函数将生成带有自定义消息的确认框，并返回用户选择的输出。

We don’t need the header and footer of the modal. We will just use the modal body and display our message in an <h4> tag. Then we will create two buttons below it with different classes btn-yes and btn-no which will be used to handle the response.

我们不需要模态的页眉和页脚。 我们将只使用模式主体并将消息显示在<h4>标记中。 然后我们将创建它下面两个按钮具有不同的cl asses b TN业s and BTN-没有将用于处理响应。

说明 (Explanation)

• We have created a function which accepts a message and a callback handler.

  我们创建了一个function ，该function接受message和回调handler 。

• In this, we are appending the modal at the end of the body tag with JQuery’s appendto method.

  在这种情况下，我们使用JQuery的appendto方法在body标签的末尾附加模式。

• After appending the modal, we are triggering or showing the modal with Bootstrap’s modal method. We are also passing two parameters {backdrop: 'static', keyboard:false} which prevent the modal from hiding with keyboard events, like pressing the ESC button or clicking in the backdrop area.

  附加模态后，我们将使用Bootstrap的modal方法触发或显示模modal 。 我们还传递了两个参数{backdrop: 'static', keyboard:false} ，可以防止模式隐藏在键盘事件中，例如按ESC按钮或单击背景区域。

• We are checking if the modal is hidden with bootstrap’s hidden.bs.modal and then we are removing the modal with JQuery’s remove method. This will prevent it from adding a modal every time.

  我们正在检查是否使用bootstrap的hidden.bs.modal隐藏了模态，然后使用JQuery的remove方法删除了模态。 这样可以防止它每次都添加模态。

We have created a function that will render and open our custom confirm box, so now we have to handle the response provided by the user.

我们创建了一个函数，该函数将呈现并打开我们的自定义确认框，因此现在我们必须处理用户提供的响应。

We will use a callback function to handle the response. In JavaScript, we can pass the function as an argument to another function and call it. The functions passed as arguments are called the callback functions.

我们将使用回调函数来处理响应。 在JavaScript中，我们可以将该函数作为参数传递给另一个函数，然后调用它。 作为参数传递的函数称为回调函数。

处理回应 (Handling the response)

说明 (Explanation)

If yes or no button is pressed then we pass true or false to the callback function and call it. After that, we hide the modal.

如果按下是或否按钮，则将true或false传递给回调函数并调用它。 之后，我们隐藏模态。

We can call our confirm box like this wherever we want.

我们可以在任何地方调用这样的确认框。

Check out the live demo here.

在此处查看现场演示。

With a custom confirm box, we have complete control over the design and some control over the functionality.

使用自定义确认框，我们可以完全控制设计并控制某些功能。

If you liked this article, please give it some ?and share it! If you have any questions related to this feel free to ask me.

如果您喜欢这篇文章，请给它一些？并分享！ 如果您对此有任何疑问，请随时问我。

For more like this and algorithmic solutions in Javascript, follow me on Twitter. I write about ES6, React, Nodejs, Data structures, and Algorithms on learnersbucket.com.

有关Java的更多此类信息和算法解决方案，请在 Twitter上 关注我 。 我写ES6 ，React过来，的NodeJS， 数据结构和算法上learnersbucket.com 。

翻译自: https://www.freecodecamp.org/news/custom-confirm-box-with-bootstrap-4-377aa67723c2/