How to click on the background to show and hide in jquery

With the continuous advancement of Internet technology, interactivity in web design is becoming more and more important. Among them, special effects such as "click on the background to show/hide" have become a very practical interaction method in web design. The realization of this special effect mainly relies on jQuery, a powerful JavaScript library.

So, how to achieve the effect of showing/hiding the background by clicking on it? Below, we will introduce the specific steps and precautions step by step.

Step 1: Set up basic HTML and CSS code

First, we need to create a modal box and a semi-transparent mask layer in HTML. Among them, the CSS attribute of the modal box is "display:none", which means that the modal box is not visible by default. The CSS attribute of the mask layer is "display:block", which means that by default, the mask layer is visible:

<div class="mask"></div>
<div class="modal" style="display:none;">
  <!-- 模态框内容 -->
</div>

<style>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  z-index: 1;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  padding: 20px;
  z-index: 2;
}
</style>

Step 2: Use jQuery to display/hide the background on click

Next, We need to use the jQuery library to implement the special effects of showing/hiding the background on click. Specifically, we can pass the following code:

$(".mask").click(function () {
  $(".modal").hide();  // 隐藏模态框
  $(this).hide();      // 隐藏遮罩层
});

$(".modal").click(function (event) {
  event.stopPropagation(); // 阻止事件冒泡
});

$(".show-modal").click(function () {
  $(".modal").show();  // 显示模态框
  $(".mask").show();   // 显示遮罩层
});

Step 3: Step by step analysis of the code

First, we added a "click" event to the mask layer. When the user clicks on the mask layer, the following operations will be performed:

• Hide the modal box ($(".modal").hide())
• Hide the mask layer ($(this) .hide())

At the same time, we also need to note that when the user clicks on the modal box, we do not want the entire special effect to be turned off. Therefore, we need to add a "click" event to the modal and stop the event from bubbling up (event.stopPropagation()).

Finally, we need to add a "click" event to the "Show Modal Box" button. When the user clicks the button, the modal box and mask layer will be displayed.

Step 4: Some notes on CSS styles

In the process of realizing this special effect, the setting of CSS styles is also very critical. Below, we list some details that need attention:

• The mask layer should be set to "fixed" positioning to ensure that the position of the mask layer does not change when the page is scrolled.
• The positioning method of the modal box should be "fixed", which ensures that the modal box is always in the center of the screen.
• The z-index value of the mask layer and modal box should be higher than the z-index value of other elements to ensure that it is always on top.

In short, clicking on the background to show/hide this special effect is very practical in web design, and it can provide users with a better interactive experience. During the implementation process, we can use the jQuery library to quickly implement this special effect, and we also need to pay attention to the CSS style settings. I hope this article can be helpful to the majority of web designers.

The above is the detailed content of How to click on the background to show and hide in jquery. For more information, please follow other related articles on the PHP Chinese website!