jquery settings popup box

jquery is a fast, small and powerful library for JavaScript. In web development, pop-up boxes are one of the frequently used technologies. Through jquery, we can easily set the pop-up box effect. This article will introduce how to use jquery to implement the pop-up box.

1. Import the jquery library file

Before using jquery, you need to introduce the jquery library file first. You can download the latest version of jquery from the official website. The introduction method is as follows:

<!-- 引入jquery库文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. Use jquery to set the pop-up box

1. Manually set the pop-up box

us The pop-up box can be manually set by mouse click or triggering an event. First, we need to create a pop-up box and add the following code to the HTML:

<!-- 弹出框 -->
<div class="popup">
  <h2>弹出框标题</h2>
  <p>弹出框内容</p>
  <button class="close-btn">关闭</button>
</div>

Next, we need to use jquery to control the display and hiding of the pop-up box. We can achieve this in the following ways:

$(function(){
  // 首先隐藏弹出框
  $('.popup').hide();

  // 点击事件触发弹出框显示
  $('#show-popup-btn').click(function(){
    $('.popup').fadeIn();
  });

  // 点击事件触发弹出框隐藏
  $('.close-btn').click(function(){
    $('.popup').fadeOut();
  });
});

In the code, we use jquery's fadeIn and fadeOut methods to display and hide the pop-up box. When the user clicks the button, the pop-up box will slowly fade into the screen, and when the user clicks the close button, the pop-up box will slowly fade out of the screen.

2. Automatic pop-up box

Sometimes, we need to automatically pop up the box after the page is loaded. At this time, we can use jquery's ready method to automatically pop up the box after the page is loaded. The code is as follows:

$(document).ready(function(){
  // 首先隐藏弹出框
  $('.popup').hide();

  // 自动触发弹出框显示
  $('.popup').fadeIn();

  // 点击事件触发弹出框隐藏
  $('.close-btn').click(function(){
    $('.popup').fadeOut();
  });
});

In the code, we use jquery's ready method to trigger the display of the pop-up box after the page is loaded.

3. Use jquery to set the style of the pop-up box

With jquery, we can easily set the style of the pop-up box. For example, set the width, height, background color, font size, etc. of the pop-up box. The following are some style settings:

$('.popup').css({
  'width': '400px',
  'height': '200px',
  'background-color': '#fff',
  'font-size': '16px'
});

In the code, we use jquery’s css method to set the style of the pop-up box. Style settings can be made according to actual needs.

Conclusion:

This article briefly introduces how to set the pop-up box effect through jquery. In addition to manually controlling the display and hiding of the pop-up box, you can also automatically pop-up the box and set the style of the pop-up box. . Hope this article is helpful to everyone.

The above is the detailed content of jquery settings popup box. For more information, please follow other related articles on the PHP Chinese website!