不用alert，js写弹出框

已于 2022-01-25 10:52:02 修改
阅读量1.7k 收藏
点赞数
文章标签： web前端
于 2018-03-27 16:06:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qweasdzxc_1092665276/article/details/79714566
版权
这篇博客介绍了如何在不使用alert的情况下，利用HTML、CSS和JavaScript来创建自定义的弹出提示框。通过展示具体的代码实现，作者详细解释了如何定义样式和触发弹出框的逻辑，为前端开发者提供了一种更灵活的提示用户信息的方法。
摘要由CSDN通过智能技术生成

html代码：

 

<script src="../js/jquery.min.js"></script>
 

<!--评论内容框-->
 <div id="toWrite" style="display: none">
     <textarea  class="toWrite1"  rows="10" id="toWrite1"></textarea>
     <input id="postBt" type="button" 

                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  1092665276
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
引入JavaScript时alert弹出框显示中文乱码问题

				
			

			

				

					10-19
				

			

		

		

			
				
总结来说，解决JavaScript`alert()`弹出框中文乱码问题的关键在于确保JavaScript和HTML文件的编码一致，并且HTML文档明确指定了正确的字符编码。通过在`<script>`标签中指定JavaScript文件的编码以及在`<head>`部分...

			
		

	



                

              
                



	

		

			

				
					
怎么判断留言框的内容是否为空

				
			

			

				

					qweasdzxc_1092665276的博客
				

				

					03-27
					
					696
					
				

			

		

		

			
				
html代码：&lt;!--评论内容框--&gt;
 &lt;div id="toWrite" style="display: none"&gt;
     &lt;textarea  class="toWrite1"  rows="10" id="toWrite1"&gt;&lt;/textarea&gt;
     &lt;input

			
		

	



                


  
              

                


	

		

			

				
					
js消息提示弹窗

				
			

			

				

					Iosersa的博客
				

				

					08-20
					
					2405
					
				

			

		

		

			
				
js+css 实现消息弹窗（非alert）

思路

创建一个容器，默认在窗口之外，当事务处理完成之后使用js动态加载类名，这个类名包含这个窗口出现与隐藏的动画，之后在一段时间后清除这个类名，以便下次加载还有动画效果
具体代码如下：

html

<div id="successTips" >添加成功 √ </div>


css

// 设置容器样式
#successTips{
	position: absolute;
    left: 48%;
    top: -50px;


			
		

	





	

		

			

				
					
JavaScript的三种弹出对话框

				
			

			

				

					铃铛
				

				

					06-17
					
					4487
					
				

			

		

		

			
				
浏览网页之时,经常会出现一些信息,这些信息有的是直接显示在网页上,有的通过对话框的形式弹出.而这些信息,是如何做到的呢?
     
     JavaScript的三种弹出对话框,分别是使用alert(),confirm()以及prompt()方法.如果不想使用弹出对话框,也可使用document.write()直接将信息显示在页面上.
      

    先看下三种弹出框和wri

			
		

	



		

			
		



	

		

			

				
					
JS的三种弹出提示框(alert、confirm、prompt)

				
			

			

				

					weixin_67044557的博客
				

				

					08-24
					
					6249
					
				

			

		

		

			
				
【代码】JS的三种弹出提示框(alert、confirm、prompt)

			
		

	





	

		

			

				
					
JS 表单验证不使用alert框

				
			

			

				

					Gyoung杨广
				

				

					05-06
					
					2731
					
				

			

		

		

			
				
JS 表单验证不使用alert框

			
		

	





	

		

			

				
					
JavaScript基础教程之alert弹出提示框实例

				
			

			

				

					10-25
				

			

		

		

			
				
在学习JavaScript时，弹出提示框是一个基础且重要的组成部分，通常使用alert()函数来实现。本篇基础教程将详细介绍如何使用alert弹出提示框，并演示其基本用法和注意事项。  alert()函数是JavaScript中最简单的函数...

			
		

	





	

		

			

				
					
js的alert弹出框出现乱码解决方案

				
			

			

				

					10-26
				

			

		

		

			
				
总结来说，解决JavaScript `alert()`弹出框乱码问题的关键在于确保所有涉及的文件和代码片段都使用统一且正确的字符集设置。这可以通过在HTML头部设置`<meta>`标签，或者确保所有输出到浏览器的代码都在适当的字符集...

			
		

	





	

		

			

				
					
alert及confirm弹出框样式，换不错

				
			

			

				

					11-10
				

			

		

		

			
				
`alert` 函数的基本语法是 `alert(message)`，它会弹出一个只有一个按钮的对话框，用户点击后，对话框关闭，程序继续执行。`message` 参数是向用户显示的文本字符串。  `confirm` 函数的语法是 `var result = ...

			
		

	





	

		

			

				
					
自定义弹出框样式 alert修改

				
			

			

				

					08-08
				

			

		

		

			
				
### 自定义弹出框样式 alert修改  在网页开发过程中，我们经常会遇到需要向用户展示提示信息的情况。传统的JavaScript `alert`方法虽然简单易用，但其样式固定且无法自定义，这在追求用户体验和界面美观的现代Web...

			
		

	





	

		

			

				
					
用jsp写留言页面，在对提交的表单进行检查时，你可能忽略的一个点！

				
			

			

				

					_闪闪发光的博客
				

				

					10-30
					
					517
					
				

			

		

		

			
				
检查提交的表单中某字段是否为空，感觉自己判断条件没有问题，但就是不成功？来看看你的问题和我一样不？

			
		

	





	

		

			

				
					
jQuery提示组件toastr（取代alert）

				
			

			

				

					weixin_33834137的博客
				

				

					01-09
					
					201
					
				

			

		

		

			
				
给大家推荐一款jquery提示插件：toastr
它是一个可以取代alert的提示信息框，它在PC，移动设备上都有不错的UI效果。

具体使用方法如下：

1、首先在网页头站调用他需要的js和css文件。

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js">...

			
		

	





	

		

			

				
					
不用alert弹出窗口的方法来显示验证信息

				
			

			

				

					gee_56的专栏
				

				

					06-25
					
					1297
					
				

			

		

		

			
				
最近由于工作的需要在开发公司内部的OA系统，无意中发现以前的系统或多或少存在一些不太友善的操作，其中一个对每个操作的返回信息——以类似JS中alert的方法弹出系统内置的对话框提示。相信很多朋友现在还会用这种传统的方法。但个人觉得此方法在当今WEB 2.0的潮流中不但给用户在视觉上产生审美疲劳，同时也会增加用户的操作（至少要按一下键盘或者点一下鼠标才能取消话框）。于是本人简单设计了一个更友善的技巧

			
		

	





	

		

			

				
					
html弹出框还没点击确定自动关闭,js提示框替代系统alert,自动关闭alert对话框的实现方法...

				
			

			

				

					weixin_39716043的博客
				

				

					05-30
					
					715
					
				

			

		

		

			
				
Box{width:100%;height:100%;position:fixed;top:0px;left:0px;background-color:rgba(0,0.6);display:none;z-index:200;}.show_alert_div{width:70%;position:absolute;top:50%;left:15%;margin-top:-80px;backgrou...

			
		

	





	

		

			

				
					
JavaScript自动关闭窗口

				
			

			

				

					尼奥
				

				

					11-24
					
					1352
					
				

			

		

		

			
				
JavaScript自动关闭窗口  

  

  

     

    

 window.onload = function () {alert('打开页面自动弹出框！');}

  

//自动关闭提示框    

function Alert(str) {    

    var msgw,msgh,bordercolor;    

    

			
		

	





	

		

			

				
					
alert实用的提示框（可点击关闭，自动消失，悬浮于右上角）

				
			

			

				

					q_1092535160的博客
				

				

					06-29
					
					1195
					
				

			

		

		

			
				
alert提示框

			
		

	





	

		

			

				
					
js点击取消按钮关闭当前弹框_js按钮确认删除提示以及js的三种弹出框简单介绍...

				
			

			

				

					weixin_39801465的博客
				

				

					12-22
					
					3129
					
				

			

		

		

			
				
js按钮确认删除提示第一种方法：html代码：1 删除js代码：1 functiondel() {2 var msg = "您真的确定要删除吗？\n\n请确认！";3 if (confirm(msg)==true){4 return true;5 }else{6 return false;7 }8 }第二种方法：1 '"  />1 useid;?>'">删除其他推芥，js的三种弹...

			
		

	





	

		

			

				
					
怎么关闭javascript弹出框,javascriptalert怎么处理

				
			

			

				

					神经网络爱好者
				

				

					10-12
					
					697
					
				

			

		

		

			
				
大家好，本文将围绕javascript alert弹窗怎么取消展开说明，怎么关闭javascript弹出框是一个很多人都想弄明白的事情，想搞清楚javascriptalert怎么处理需要先了解以下几个事情。由于各个浏览器之间的差异，弹出框不一样，这有影响页面的布局，所以自己就用原声js封装了一个alert弹出框，希望对有需求的有所帮助...alertalert。

			
		

	





	

		

			

				
					
javascriptalert怎么处理,javascript中alert写法

					
最新发布

				
			

			

				

					阿发狗伪原创
				

				

					11-30
					
					393
					
				

			

		

		

			
				
alert是HTML DOM 中用到的一种脚本语言，它的中文意思是"提醒"。其主要用法就是在你自己定义了一定的函数以后，通过执行相应的操作，所弹出对话框的语言。alert 方法有一个参数，就是用户想弹出的内容，弹出框很简单，就一个显示功能。如果你输入的是：123456  点击确定之后kouling 的值为：123456。内容很简单，就这么一点东西，还是一句话，只有最合适的技术，没有最好的技术。3、prompt()  这个弹出框相对于上面两个弹出框来说，智能化又高了，你可以直接在这个弹出框里面回复。

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
1092665276

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值