JQuery实现页面弹出框_jquery

本文实例为大家分享了JQuery实现页面弹出框的具体代码，供大家参考，具体内容如下

bootstrap4里面有个模态框，点击页面中的某个按钮或者元素就会弹出一个框框：

今天尝试用JQ来实现一下，具体的思路就是：

1、在页面中创建一个div
2、用JQ中的hide()和show()来控制上面的div的隐藏和显示

第一步：创建按钮，div，样式

    
    
    
    

    点击显示弹出框
    

        //里面是弹出框的内容    
    

第二步：引入JQ文件和写函数实现功能

效果：

第三步：优化一下弹出框的细节，比如右上角给它加个关闭的功能等等，放上全部代码

    
        
        
        
    
    
        点击显示弹出框
        

            
            

                弹出框
                x
            
            
            

            
            

        
    
    
    

最终效果：

上面这就是用JQ对弹出框功能的实现，实际应用中建议从外部引入CSS文件，免得太乱了，还有就是JQ的show()和hide()可以设置speed参数，就显示和隐藏的速度，会有一个淡入淡出的效果。

hide(1000);
show(1000);