JQuery实现页面弹出框

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

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

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

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

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

<head>
    <meta charset="UTF-8">
    <title>页面弹出框</title>
    <style>
        #popUpBox{
            display: block;        //一开始应该是隐藏状态，所以是none
            width: 1080px;    //弹出框的宽
            height: 630px;    //弹出框的高
            background-color: yellow;
            margin:0 auto;    //弹出框页面居中
        }
        </style>
    </head>
<body>
    <button id="ShowBox" onclick="ShowBox('popUpBox')">点击显示弹出框</button>
    <div id="popUpBox">
        //里面是弹出框的内容    
    </div>
</body>

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

<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script>
    function ShowBox(BoxID){
        //获取页面要显示的弹出框的id
        var popBox = $("#"+BoxID);
        //用show()方法使其显示出来
        popBox.show();
    }
    function HideBox(BoxID){
        //获取页面要隐藏的弹出框的id
        var popBox = $("#"+BoxID);
        //用hide()方法使其隐藏
        popBox.hide();
    }
</script>

效果：

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面弹出框</title>
        <style>
            #popUpBox{
                display: none;
                width: 1080px;
                height: 630px;
                margin: 0 auto;
                background-color: yellow;
            }
            #BoxHead{
                /*文字水平居中*/
                text-align: center;    
                /*宽度继承popUpBox的,不需要设置*/
                height: 40px;
                border: 1px solid black;
            }
            #BoxHead>*{
                /*只有一行,将line-heigh的数值设置的和父容器的高度一样*/
                /*可以实现垂直居中*/
                line-height: 40px;
            }
            #BoxHead>a{
                float: right;
                margin-right: 10px;
            }
        </style>
    </head>
    <body>
        <button id="ShowBox" onclick="ShowBox('popUpBox')">点击显示弹出框</button>
        <div id="popUpBox">
            <!--弹出框的头部，里面有弹出框标题和关闭按钮-->
            <div id="BoxHead">
                <label>弹出框</label>
                <a href="javascript:void(0)" onclick="HideBox('popUpBox')">x</a>
            </div>
            <!--弹出框的主体部分-->
            <div id="BoxBody"></div>
            <!--弹出框的底部，可以加一些功能按钮，比如说保存按钮-->
            <div id="BoxFooter"></div>
        </div>
    </body>
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
    <script>
        function ShowBox(BoxID){
            //获取页面要显示的弹出框的id
            var popBox = $("#"+BoxID);
            //用show()方法使其显示出来
            popBox.show();
        }
        function HideBox(BoxID){
            //获取页面要隐藏的弹出框的id
            var popBox = $("#"+BoxID);
            //用hide()方法使其隐藏
            popBox.hide();
        }
    </script>
</html>

最终效果：

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

hide(1000);
show(1000);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery+css+html实现页面遮罩弹出框

    jQuery+css+html实现页面遮罩弹出框

    页面遮罩弹出框是最常见的一种情况,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和html, html代码如下: 复制代码 代码如下: <div id="main"><a href="javascript:showBg();">点击这里查看效果</a> <div id="fullbg"></div> <div id="dialog"&g

  • jquery弹出框插件jquery.ui.dialog用法分析

    本文实例讲述了jquery弹出框插件jquery.ui.dialog用法.分享给大家供大家参考,具体如下: 1. jquery.ui.dialog 官方地址 http://jqueryui.net/dialog/ jquery.ui.dialog是一个非常灵活的模式框,它的官方地址为: http://docs.jquery.com/UI/Dialog 2. 文件引用 要使用jquery.ui.dialog,需要引用两个文件,1个是js,另外1个是css 在contentpage中添加: <scr

  • jquery实现一个简单好用的弹出框

    jquery实现一个简单好用的弹出框

    自己改写一些jquery的部分代码,自己总结出来一个比较好用的jquery弹出框,留着以后工作时候再用.喜欢就拿走吧! 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

  • 基于jQuery的弹出框插件

    html如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e

  • JQuery 弹出框定位实现方法

    代码: 复制代码 代码如下: //页面代码 (简化) <asp:TextBox ID="tbOperation2" runat="server" onclick="buttonclick($(this))" CssClass="ui-button-icons-only" Text="按钮"></asp:TextBox> <div id="editdialog"

  • jquery弹出框的用法示例(一)

    最近做一个项目,许多功能都是关于弹出框的,以前觉得弹出框就那一种,很容易实现,但是最近真的做起这个功能了,发现会有好多自己考虑不到的问题. 比如关于一些添加,删除,修改的弹出框,当添加一些用户的时候,弹出框里要提交一些关于用户的信息,设置密码等信息,当修改的时候,根据用户的名字和id号来修改密码等等. 例子如下: 复制代码 代码如下: <ul class="tabPanel clearfix"> <li class="hover"> <

  • js弹出框轻量级插件jquery.boxy使用介绍

    当你需要使用弹出框时,当然可以使用jquery-ui,artdiag,blockUI等等,但今天我介绍一个轻量级的插件 boxy!它可以把美工设计的弹出框很容易的体现出来,而且兼容性还不错! 复制代码 代码如下: <script type='text/javascript'> $(function() { $('#ask-actuator').click(function() { Boxy.ask("How are you feeling?", ["Great&q

  • 基于jquery的弹出提示框始终处于窗口的居中位置（类似于alert弹出框的效果）

    原理很简单: 获取当前屏幕(窗体)的宽度和高度,因为不同浏览器的窗体大小是不一样的.有了这个,可以计算出来垂直居中的坐标.但是滑动了滚动条怎么依然垂直居中呢?这个时候就要获取当前窗体距离页面顶部的高度,加到刚刚的y轴坐标即可. $(document)是获取整个网页的,$(window)是获取当前窗体的,这个要搞清楚. 最后把获取的坐标赋给窗体即可,窗体本身是绝对定位的,所以自然可以到窗体中间. 具体代码: 复制代码 代码如下: <!DOCTYPE HTML> <html> <

  • jQuery实现消息弹出框效果

    jQuery实现消息弹出框效果

    本文实例为大家分享了jQuery消息弹出框的具体代码,供大家参考,具体内容如下 效果图 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- BootCDN提供了很多如JQuery.Chart.js.ECarts.js等等,BootCDN官网地址:http://www.bootcdn.cn/--> <scrip

  • jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)

    jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)

    对于 Boxy弹出框的使用之前写过一些文章(查看jquery.boxy基础),今天主要是在解决一个需要之后,觉得值得把它记录下来,所以就再写一篇,主要功能是,在弹出对话框后,隔N秒后自动隐藏,还有就是自动跳转! 效果如图:  而所封装的代码如下: 复制代码 代码如下: // boxy对话框扩展 var Boxy_Extensions = { options: { title: '艺吧提示', closeText: 'x' }, //弹出后N秒后隐藏 alertDelayFun: function

随机推荐