How to implement pop-up windows in jquery

In web design, the pop-up window function is widely used. It can help us display prompt information to users, confirm information operations, display picture effects and other scenarios. In jquery, there are many methods to implement pop-up windows. The following will introduce several common implementation methods.

1. Use the dialog component of jQuery UI

dialog is a component in the jQuery UI library, specially used to create pop-up windows. To use the dialog component, you first need to introduce the CSS and JS files of the jQuery UI library. Then you can create a basic pop-up window through the following code:

<!-- 引入CSS文件 -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<!-- 引入JS文件 -->
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!-- 创建弹窗 -->
<div id="dialog" title="提示信息">
  <p>这里是提示内容</p>
</div>

<script>
  $(function() {
    $("#dialog").dialog();
  });
</script>

Among them, the div element with the ID "dialog" is the pop-up window. In the outer frame, the title attribute is the title of the pop-up window, and the content in the p tag is the main information of the pop-up window. Finally, by calling the dialog() method, you can create a pop-up window with a default style.

In addition, you can customize the display style and function of the pop-up window through the configuration parameters of the dialog() method. For example, the following code implements the function of displaying confirmation and cancel buttons in a pop-up window, and triggering a callback function after clicking the confirm button:

<div id="dialog-confirm" title="确认操作">
    <p>确认要执行操作吗？</p>
</div>

<script>
    $(function() {
        $("#dialog-confirm").dialog({
            resizable: false,
            height: "auto",
            width: 400,
            modal: true,
            buttons: {
                "确认": function() {
                    // 这里是确认按钮的回调函数
                    $( this ).dialog( "close" );
                },
                "取消": function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    });
</script>

2. Use the jQuery plug-in Fancybox

FancyBox is a A lightweight, low-dependency, highly customizable jQuery pop-up plug-in. You can use Fancybox to implement various pop-up window functions such as single picture pop-up window, multiple picture pop-up window, media pop-up window, ajax loading, etc.

First, you need to introduce the CSS and JS files of the Fancybox plug-in. Then you can create a pop-up window by calling the Fancybox() method through the following code:

<!-- 引入CSS文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />

<!-- 引入JS文件 -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

<!-- 创建图片弹窗 -->
<a data-fancybox="gallery" href="image.jpg">
    <img src="image.jpg" alt="图片说明">
</a>

<!-- 创建ajax加载弹窗 -->
<button data-fancybox data-type="ajax" data-src="ajax.html">点击加载弹窗</button>

<script>
    $(function() {
        $("[data-fancybox]").fancybox({
            //这里是配置参数
        });
    });
</script>

In the above code, the first a tag is An example of a single picture pop-up window. The data-fancybox attribute indicates the group of the picture to be popped up, and the href attribute is the address of the image file to be displayed in the pop-up window. The second button tag is an example of an ajax loading pop-up window, in which the data-fancybox and data-type attributes represent the pop-up window type and loading method respectively.

3. Use pure CSS to implement pop-up windows

In addition to using JS plug-ins, we can also achieve simple pop-up window effects through pure CSS. The following is a basic pure CSS pop-up window example:

<button class="modal-toggle">点击弹出弹窗</button>

<div class="modal">
    <div class="modal-content">
        <h3>弹窗标题</h3>
        <p>这里是弹窗内容</p>
        <button class="modal-close">关闭窗口</button>
    </div>
</div>

<style>
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
        justify-content: center;
        align-items: center;
    }

    .modal-content {
        max-width: 80%;
        background-color: white;
        padding: 20px;
        border-radius: 5px;
        text-align: center;
    }

    .modal-toggle {
        display: block;
        margin: 50px auto;
        width: 200px;
        height: 50px;
        color: white;
        font-size: 20px;
        background-color: #1ABC9C;
        border: none;
        border-radius: 5px;
        outline: none;
        cursor: pointer;
    }
</style>

<script>
    $(function() {
        $(".modal-toggle").click(function() {
            $(".modal").fadeIn();
        });

        $(".modal-close").click(function() {
            $(".modal").fadeOut();
        });
    });
</script>

In the sample code, the fixed positioning and display attribute control of CSS3 are used to achieve the basic effect of the pop-up window. At the same time, jQuery's fadeIn() and fadeOut() methods are also used to trigger the appearance and closing of pop-up windows. Of course, developers can flexibly adjust the style and function of pop-up windows according to actual needs.

To sum up, the above are several ways to implement pop-up windows in jquery. Different methods have different applicable scenarios. Developers can choose the most appropriate method according to actual needs to achieve excellent pop-up effects.

The above is the detailed content of How to implement pop-up windows in jquery. For more information, please follow other related articles on the PHP Chinese website!