js if confirm

confirm 是 JavaScript 中的一个内置函数，用于显示一个带有确定和取消按钮的模态对话框，并返回用户的选择结果。以下是关于 confirm 的基础概念、优势、应用场景以及可能遇到的问题和解决方法：

基础概念

confirm 函数接受一个字符串参数作为对话框中显示的消息，并返回一个布尔值：

true 表示用户点击了“确定”按钮。
false 表示用户点击了“取消”按钮。

示例代码

if (confirm("你确定要继续吗？")) {
    // 用户点击了“确定”
    console.log("用户确认执行操作");
} else {
    // 用户点击了“取消”
    console.log("用户取消了操作");
}

优势

简单易用：confirm 提供了一种快速的方式来获取用户的确认，无需编写复杂的 UI 组件。
跨浏览器兼容：几乎所有的现代浏览器都支持 confirm 函数。

应用场景

删除操作确认：在执行删除重要数据之前，通过 confirm 提示用户确认。
重要设置更改：当用户尝试更改关键设置时，使用 confirm 来确保他们明白这些更改的影响。

可能遇到的问题和解决方法

问题1：用户体验不佳

原因：频繁弹出的确认对话框可能会干扰用户的正常操作流程，导致用户体验下降。

解决方法：

尽量减少不必要的 confirm 调用。
使用更友好的方式提示用户，例如在页面上显示警告信息而不是弹出对话框。

问题2：样式不一致

原因：不同浏览器中的 confirm 对话框样式可能有所不同，影响页面的整体一致性。

解决方法：

自定义模态对话框，使用 CSS 和 JavaScript 来实现与页面风格一致的用户界面。

示例：自定义模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom Confirm Dialog</title>
    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>

<button onclick="showCustomConfirm()">Show Confirm</button>

<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>你确定要继续吗？</p>
        <button onclick="confirmAction(true)">确定</button>
        <button onclick="confirmAction(false)">取消</button>
    </div>
</div>

<script>
    function showCustomConfirm() {
        document.getElementById('myModal').style.display = 'block';
    }

    function confirmAction(confirmed) {
        document.getElementById('myModal').style.display = 'none';
        if (confirmed) {
            console.log("用户确认执行操作");
        } else {
            console.log("用户取消了操作");
        }
    }

    // Close the modal when clicking on the close button
    document.querySelector('.close').addEventListener('click', function() {
        document.getElementById('myModal').style.display = 'none';
    });
</script>

</body>
</html>

通过这种方式，你可以创建一个与页面风格一致的自定义确认对话框，从而改善用户体验并保持界面的一致性。

页面内容是否对你有帮助？

有帮助

没帮助

$.confirm : jquery: jquery不是函数

、

即时通信使用jquery.confirm.jsTypeError: $.confirm is not a function$.confirm({

浏览 5提问于2014-10-30得票数 0

2回答

JS Confirm，false，return，not working

、

html"); if (confirm

浏览 1提问于2010-11-22得票数 3

回答已采纳

1回答

初始加载时的简单模式对话框

、、

' rel='stylesheet' media='screen' /><scripttype='text/javascript' src='js/jquery.simplemodal.js

浏览 2提问于2012-03-12得票数 0

4回答

为什么jquery确认ins不工作

、

/3.0.3/jquery-confirm.min.css"> </head>

浏览 1提问于2017-02-14得票数 1

1回答

如何添加angular2-引导-确认到angular2？

import { Component } from '@angular/core';import {Positioning} from 'angular2-bootstrap-confirm/position/position'; selectorbtn-default" mwl

浏览 4提问于2016-09-07得票数 1

回答已采纳

2回答

Jquery确认对话在内容占位符中不起作用

、、

window.onload = function() { $.confirm({ content: '', confirm: function() { });} <script src="https:/

浏览 2提问于2017-07-31得票数 0

3回答

React本机元素类型无效，应为字符串，但未定义

、、

下面是我的代码：import _ from 'lodash';import { connect/actions'; </Card> } const

浏览 2提问于2017-03-06得票数 7

1回答

在rails6上使用“‘data confirm-modal”

、、、

[已尝试的步骤]gem 'data-confirm-modal'gem 'bootstrap-sass', '3.4.1'app/javascript/packs/application.js // This file is automatically compiled by Webpac

浏览 2提问于2021-02-27得票数 0

2回答

Jquery确认无效

、、、

confirmation</title> <script src="external/jquery/jquery.js"></script> <script

浏览 2提问于2016-03-03得票数 3

回答已采纳

1回答

基于JS OnServerClick MessageBox的是/否选择执行

、、、、

浏览 0提问于2015-10-30得票数 1

回答已采纳

1回答

引导确认框警报无效

、、、

<head> src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> <

浏览 2提问于2016-04-23得票数 0

回答已采纳

1回答

使用js confirm* + php删除链接*

、、

这是删除链接 <a href="javascript:void(0);" id="del_<?=$artworkDetails['artwork_id'] ?>_<?=$temp_cat_id; ?>" onclick="deleteThisArtWork(this.id)">Delete</a>显然，当单击该链接时，门户会自动删除数据，我认为这与ajax

浏览 4提问于2011-07-07得票数 0

回答已采纳

3回答

在jquery中设置宽度失败-确认吗？

、

我正在尝试使用jquery-confirm。请看下面的代码和结果。结果和我们在网站上看到的不一样。有什么问题吗？ <link rel="stylesheet" href="../jquery-confirm-master/dist/jquery-confirm.min.css">

浏览 0提问于2017-05-14得票数 2

4回答

确认phantom.js中的警报窗口

、、、

我有一个查找按钮并单击它的函数，但是在这个警报出现之后，我需要使用phantom.js来确认它。

浏览 3提问于2013-11-11得票数 7

回答已采纳

1回答

我在这个后面设置了JS确认对话框的样式，但是现在所有的JS警报框都显示相同的消息。如何为不同的链接添加单独的消息？ <%= f.password_field :password_confirmation, :class => 'input-xlarge', placeholder: 'Password confirm</div> <div class="actions"><%= f.submit &

浏览 0提问于2014-07-22得票数 1

1回答

jAlert和jConfirm不能正确合作

、、

; jConfirm('Can you confirm this?'

浏览 6提问于2014-09-26得票数 0

回答已采纳

1回答

在vtiger crm中显示自定义弹出窗口

、

在vtiger crm中，当用户打开一个名为回文，姓氏为semordnilap的联系人时，我想显示一个弹出框。

浏览 6提问于2018-07-03得票数 0

1回答

jQuery对话框显示未修饰

、

我的jQuery回调是正确的，但是对话框看起来完全是空的(见图)。这是我的javascript： event.preventDefault(); $.ajax({ url: 'my_code.php',

浏览 2提问于2015-06-09得票数 0

回答已采纳

2回答

无法读取未定义的属性“xxx.xxx”

、、

/core/actions/index.jsimport confirm from './core/actions/confirm.js Store.dispatch({试图将confirm

浏览 2提问于2020-03-27得票数 1

回答已采纳

1回答

如何使用数据-使用javascript link_to确认？

、、

我试着用数据确认来拦截javascript链接. link_to "test", "#", :onclick=>"call_js_function(); return false;", :data=>{:confirm=>"are you sure?"}

浏览 1提问于2016-07-04得票数 0

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js if confirm

基础概念

示例代码

优势

应用场景

可能遇到的问题和解决方法

问题1：用户体验不佳

问题2：样式不一致

示例：自定义模态对话框

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐