javascript弹出窗口中增加确定取消按钮

在Web开发中，使用JavaScript弹出窗口来获取用户的确认或者提供额外的操作选项是一种常见的交互方式。本文主要介绍如何在ECShop这样的电子商务平台上，通过JavaScript代码实现在弹出窗口中增加“确定”和“取消”按钮的效果。这可以通过多种JavaScript函数实现，如window.confirm()，这是一种简单而直接的方式，用于创建带有确定和取消按钮的对话框。 我们可以使用HTML中的<a>标签结合onclick事件处理器来实现这一功能。当用户点击链接时，会触发一个JavaScript函数。例如，在ECShop模板中，可以使用如下代码： ```html <ahref="javascript:;" onclick="if(confirm('多次投票将扣除100个积分,您确定投票吗？')){vote_this({$item.id},{$item.cat_id});}else{returnfalse;}"id="supportme15"></a> ``` 这段代码展示了当点击<a>标签时，会调用JavaScript的confirm()函数弹出一个询问对话框。如果用户点击“确定”，则执行vote_this函数，这可能涉及到将投票信息发送到服务器的某个PHP脚本（如voting_ajax.php）。如果用户点击“取消”，则不会执行任何操作，并且函数会返回false，阻止链接的默认行为。这里的{$item.id}和{$item.cat_id}是ECShop模板中定义的变量，用于传递投票的项目ID和分类ID。 vote_this函数的定义如下： ```javascript function vote_this(voting_id, cat_id) { $.post("voting_ajax.php", {cat_id: cat_id, voting_id: voting_id}, function(data) { alert(data.message); window.location.reload(); }, "json"); } ``` vote_this函数是一个典型的AJAX调用，使用jQuery的$.post()方法向voting_ajax.php发送数据，然后执行一个回调函数来处理从服务器返回的数据。这里处理返回的数据可能是显示一个消息，然后刷新页面，以便显示最新的投票结果。 除此之外，还可以使用window.prompt()来获取用户的输入，或者使用自定义的模态窗口来实现更加复杂的交互。window.confirm()只是实现带有“确定”和“取消”按钮对话框的其中一种方式。这个函数会返回一个布尔值，true表示用户点击了“确定”，false表示用户点击了“取消”。 在实现时，我们可以通过if语句来决定是否执行某些操作。例如： ```javascript var like = window.confirm("你觉得好吗?"); if(like == true) { document.write("谢谢你的夸奖"); // 用户点击了确定 } else { document.write("希望得到你的夸奖"); // 用户点击了取消 } ``` 在上述代码中，根据用户点击确定还是取消，页面会显示不同的信息。 在ECShop项目中，还可能涉及到投票次数的判断。如果用户之前已经投过票，可能需要扣除积分作为惩罚，这时候就需要调用vote_this函数来执行投票操作。如果后台检测到用户是第一次投票，则不需要扣除积分，也就不需要通过确认对话框让用户确认投票行为。 通过上述示例和代码解析，可以了解到在ECShop这样的电子商务平台上，通过JavaScript弹出带有“确定”和“取消”按钮的窗口来增强用户体验是可行的。这不仅可以减少不必要的操作，还可以根据用户的反馈来执行不同的逻辑处理。通过简单地使用JavaScript内置的对话框函数，开发者可以快速地实现这一功能，并且通过自定义的回调函数，可以灵活地根据业务需求调整用户交互的行为。