14-alert\confirm\prompt\自定义弹窗

已于 2024-05-30 16:53:01 修改
阅读量893 收藏 6
点赞数 14
分类专栏： Web自动化测试 文章标签： selenium 自动化
于 2024-05-29 17:05:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhangzhan0813/article/details/139299730
版权

一、认识alert\confirm\prompt

        下图依次是alert、confirm、prompt，先认清楚长什么样子，以后遇到了就知道如何操作了。

二、alert操作

  1. 先用driver.switch_to.alert方法切换到alert弹出框上；
  2. 可以用text方法获取弹出的文本信息；
  3. accept()方法相当于点击“确认”按钮；
  4. dismiss()方法相当于点击右上角的x，取消弹出框。

                

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        


    



                



	

		

			

				
					
自定义confirm弹出框_超赞 React.js 桌面端自定义弹窗组件RLayer

				
			

			

				

					weixin_39806679的博客
				

				

					12-03
					
					1007
					
				

			

		

		

			
				
今天给小伙伴们分享一个全新开发的React自定义对话框最近RLayer。rlayer 基于react.js开发的PC桌面端交互式弹出框组件。融合了Dialog、Message、Notification、ActionSheet、Toast、Popover、Popconfirm等多种功能。看名称就能联想到前端界有名的弹窗layer.js，其实在设计开发之初就有借鉴layer插件实现思想。功能提供函数式...

			
		

	



                

            
              



	

		

			

				
					
web自动化测试第10步：获取浏览器弹窗alert、自定义弹窗以及其操作

				
			

			

				

					许西城的博客
				

				

					08-02
					
					1万+
					
				

			

		

		

			
				
在平时的测试中，有时候会遇到弹窗的问题，有的是浏览器弹窗（alert）、有的是自定义弹窗；这节我们主要来讨论一下关于浏览器弹窗和简单的自定义弹窗。

一、关于alert弹窗的方法

备注：部分方法为老写法，官方已经不推荐使用；点击这篇文章查看切换alert的新写法。

switch_to_alert(): 定位到alert弹窗，返回一个弹窗的对象

dismiss(): 对弹窗对象的取消操作（相当...

			
		

	



              


  
              

                


	

		

			

				
					
自制confirm弹出框

				
			

			

				

					07-15
				

			

		

		

			
				
自己研究出来的自定义删除确认弹出框，代码图片完整，可以直接运行。以此为基础可以做优美的自定义alert等其它想要的弹出框。好东西就要分享给大家。

			
		

	





	

		

			

				
					
可以弹出确认对话框的自定义Web服务器控件ConfirmButton

				
			

			

				

					无界编程
				

				

					10-25
					
					3716
					
				

			

		

		

			
				
作者：活靶子[原创]      出处：AspxBoy.Com经常在论坛里看到类似这样的问题：“…如何在点击删除按钮的时候弹出个确认删除对话框”。下面我们来自己写一个这样的自定义Web服务器控件!思路如下：继承System.Web.UI.WebControls.Button控件增加一个属性“ConfirmMessage”来表示弹出确认框上面的提示信息。在服务器

			
		

	



		

			
		



	

		

			

				
					
Selenium 中的 alert 处理

					
最新发布

				
			

			

				

					bbppooi的博客
				

				

					03-13
					
					1316
					
				

			

		

		

			
				
弹窗的基本处理

			
		

	





	

		

			

				
					
javascript自定义弹出的确认框Confirm

				
			

			

				

					ZHAO Q.H.
				

				

					11-13
					
					4827
					
				

			

		

		

			
				
使用场景
如果想自定义浏览器自带的弹出框样式，可以参考下面的代码
知识点

异步函数(async function)
async
await
Promise
resolve

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<tit

			
		

	





	

		

			

				
					
prompt弹框的使用

				
			

			

				

					Mr.baicai's Blog
				

				

					07-12
					
					8699
					
				

			

		

		

			
				
一直做着后台的工作，前台的东西好像接触的也不少，但是研究的比较少，其实前端的设计与实现也是“博大精深”。其中JQuery就是一款功能非常强大的工具，它已经写好并实现了很多现有的方法。我们需要直接在引用即可，当然如果需要自定义，在他们的规范基础上也可以实现自定义。
1.  prompt
  JS中有三种弹框方式：confirm，弹出一个询问框，有确定和取消按钮;alert,弹出对话框并输出一段提

			
		

	





	

		

			

				
					
mobile-message：基于移动端的弹窗组件，默认提供信息，成功，警告，错误，警报，确认，多个，垂直，底页，提示，可自定义弹窗。它可以包含任何Html内容可以自定义弹窗的样式，也可以加入自定以的弹窗动画

				
			

			

				

					02-03
				

			

		

		

			
				
mobile-message是一个基于移动端的弹窗组件，可以提供信息，成功，警告，错误，警报，确认，多个，垂直，底页，提示，可自定义弹窗。它可以包含任何HTML内容可以自定义弹窗的样式，也可以加入自定以的弹窗动画。 ...

			
		

	





	

		

			

				
					
掌握jquery-confirm：提升网页弹窗体验

				
			

			

				

					
				

			

		

		

			
				
引入必要的文件后，可以通过调用`$.alert()`、`$.prompt()`或`$.confirm()`等方法来创建不同类型的弹出框。这些方法简单易用，允许开发者快速实现弹出效果而无需编写大量代码。  3. 自定义弹出框： jQuery Confirm...

			
		

	





	

		

			

				
					
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件

				
			

			

				

					10-18
				

			

		

		

			
				
在本例中，涉及到开发自定义组件 Alert、Confirm、Toast和Prompt。  2. 移动端弹窗组件介绍：  - Alert：通常用于向用户显示一些紧急或重要的提示信息。用户在看到提示之后只有一种操作，即关闭对话框。  - Confirm...

			
		

	





	

		

			

				
					
自定义弹框样式，自定义confirm按钮，

					
热门推荐

				
			

			

				

					xiaoshihoukeshuaiL的博客
				

				

					10-25
					
					3万+
					
				

			

		

		

			
				
不同的浏览器其自带的alert();confirm();样式大致是一样的，挺丑的。在之前做过的项目中整理了一份弹出框的代码。



整理后的代码已经上传github，有兴趣的朋友可以看看。

 


&lt;!DOCTYPE html&gt;
&lt;!--自定义弹框--&gt;
&lt;html lang="zh"&gt;
&lt;head&gt;
	&lt;link rel="styleshe...

			
		

	





	

		

			

				
					
自定义alert 弹框 弹窗

				
			

			

				

					09-18
				

			

		

		

			
				
自定义alert 弹框 弹窗 公用的alert.jsp的页面  引用直接使用 还可根据实际需要做修改，修改系统自带的弹框样式，有alertError 和alertSuccess两种样式

			
		

	





	

		

			

				
					
自定义样式弹框alert和confirm

				
			

			

				

					08-22
				

			

		

		

			
				
可以自己定义样式、自定义宽高、自定义按钮文字的模拟alert和confirm

			
		

	





	

		

			

				
					
alert弹出框

				
			

			

				

					01-23
				

			

		

		

			
				
漂亮的alert弹出框

			
		

	





	

		

			

				
					
alert弹窗样式

				
			

			

				

					05-17
				

			

		

		

			
				
文件中包含index.html（页面）、jquery-1.7.2.min.js（jquery）、jquery.similar.msgbox.js（重写alert弹窗样式）

			
		

	





	

		

			

				
					
jquery-confirm.js弹出窗调用自定义DIV

				
			

			

				

					DJCBPL的专栏
				

				

					11-26
					
					1100
					
				

			

		

		

			
				
一、引入相关脚本

<link type="text/css" href="css/jquery-confirm.css"/>
<script src="js/jquery-confirm.js"></script>

二、HTML代码
<style type="text/css">
    .tbBox{display:none;}
    .tbBox .tbHead{height:30px;}
    .tbBox .tbBody{padding:15p

			
		

	





	

		

			

				
					
工作问题之自定义confirm功能框

				
			

			

				

					sunyiban的专栏
				

				

					08-12
					
					666
					
				

			

		

		

			
				
昨天牛X前端给做了一个带有确认取消按钮的弹出框

			
		

	





	

		

			

				
					
前端 自定义确认提示框（二）,前端 自定义弹出框-提示框（一）,前端 自定义弹出框-提示框...

				
			

			

				

					weixin_36514781的博客
				

				

					01-31
					
					1347
					
				

			

		

		

			
				
上一篇有自定义提示框，前端 自定义弹出框-提示框(一)，这篇推荐一个确认框的实现。
JS默认确认框
确认框 var result=confirm(‘确认删除XX文件？’);result为bool类型

回复确认框var result=prompt(‘请输入文件标题：’);result返回输入的值

自定义确认框
下文提供一个自定义提示框的案例，通过另一种方案(样式设置)来实现：
1  ...

			
		

	





	

		

			

				
					
Elementui，通过Dialog，实现全局动态confirm自定义弹窗，不需要各页面单独引入组件（可显示页面、html、代码高亮显示、普通文字）

				
			

			

				

					qq_40591925的博客
				

				

					06-23
					
					1万+
					
				

			

		

		

			
				
Elementui，通过el-dialog，实现confirm 弹窗

			
		

	





	

		

			

				
					
vue alert弹窗

				
			

			

				

					02-22
				

			

		

		

			
				
### 创建 Vue.js Alert 弹窗

在 Vue.js 中创建自定义的 `Alert` 弹窗可以通过多种方式实现。一种常见的方式是利用 Vue 的组件机制来构建可重用的弹窗组件。

#### 使用 Vue.extend 和 require 加载外部模板文件

通过 Vue.extend 可以扩展一个新的 Vue 构造器，从而创建独立作用域内的子类[^1]：

```javascript
// 定义并注册全局组件
const alertHonor = Vue.extend(require('./alert.vue'));
new alertHonor().$mount('#app');
```

这种方式适合于将弹窗逻辑分离到单独的 `.vue` 文件中管理，便于维护和复用。

#### 利用 Quasar Framework Modal 封装弹窗

对于采用 Quasar UI 框架的应用程序来说，可以基于其内置的 Modal 组件快速搭建出功能丰富的对话框[^2]:

```html
<template>
  <q-dialog v-model="visible">
    <!-- 对话框内容 -->
    <q-card class="bg-white text-black">
      <q-card-section>{{ message }}</q-card-section>

      <q-separator />

      <q-card-actions align="right">
        <q-btn flat label="关闭" color="primary" @click="hideDialog"/>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      message: ''
    }
  },
  methods: {
    showDialog(msg) {
      this.message = msg;
      this.visible = true;
    },
    hideDialog() {
      this.visible = false;
    }
  }
}
</script>
```

此代码片段展示了如何结合数据绑定与事件处理函数控制模态窗口的状态切换以及显示特定消息给用户。

#### 调整 ClipboardJS 在 Vue 弹窗内工作正常

当遇到像 ClipboardJS 这样的第三方库无法按预期运作的情况时，可能是因为初始化时机不对或是 DOM 结构变化引起的。确保 clipboard 实例是在正确的生命周期钩子里被创建，并且目标元素确实存在于文档流当中:

```javascript
import ClipboardJS from 'clipboard';

mounted(){
  const copyButton = document.querySelector('#copy');

  if (!copyButton) return;

  new ClipboardJS(copyButton, {
    text: () => 'https://www.baidu.com'
  });

  // 添加成功/错误监听器...
},
beforeDestroy(){
  // 清理资源防止内存泄漏
  clipboard.destroy();
}
```

上述调整有助于解决因异步渲染等原因造成的插件失效问题。

#### 提供简洁易懂的服务选择界面设计模式

针对较为复杂的业务场景，比如服务套餐的选择页面，则需考虑更灵活的设计方案[^3]。这里推荐使用 Flexbox 或 Grid 来布局选项列表，并借助 CSS 类名动态改变样式达到视觉反馈效果；同时配合 Vuex 状态管理模式同步多个视图间的数据交换过程。

综上所述，在 Vue 应用里制作一个简单的提示型弹窗并不复杂，关键是理解好框架本身的工作原理及其提供的工具集特性。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值