jQuery学习笔记(2)-用jquery实现各种模态提示框代码及项目构架

下面我将详细讲解“jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架”的完整攻略。

简介

此篇教程是jQuery学习笔记系列的第二篇，主要是通过练习实现各种模态提示框的代码来掌握jQuery的相关知识点。在此过程中，我们将探索如何通过jQuery来实现模态提示框的功能，包括：警告框、信息框、确认框、输入框和加载框。

项目构架

在开始练习之前，我们需要先构建一个基本的项目架构，简单的项目结构可以如下：

|-- css/
|   |-- style.css
|-- js/
|   |-- jquery.min.js
|   |-- modal.js
|-- index.html

在此项目结构中，css目录中存放着样式表文件style.css，js目录中存放着jQuery库文件jquery.min.js和模态框提示框相关的自定义脚本文件modal.js，index.html为项目的首页文件。

实现模态提示框的代码

以下是几种常见的模态提示框的代码和详细说明。

警告框

警告框通常用于提醒用户某些重要信息或者需要用户进行某些操作。我们可以通过jQuery来实现一个简单的警告框，代码如下：

function showAlert(message) {
  var $alert = $('<div>')
      .addClass('modal alert')
      .html('<span class="message">' + message + '</span>' +
            '<button class="close">关闭</button>');

  $('body').append($alert);

  $alert.find('.close').on('click', function() {
    $alert.remove();
  });
}

在上面的代码中，首先通过jQuery创建了一个div，并为其添加了modal和alert两个类名，用于控制该div的样式。然后，将警告消息和关闭按钮添加到该div中。最后，将该div添加到body元素中，以显示出警告框。同时，注册了关闭按钮的点击事件，当点击关闭按钮时，移除该警告框元素。

信息框

信息框通常用于展示用户相关的一些信息。我们可以通过jQuery来实现一个简单的信息框，代码如下：

function showInfo(message) {
  var $info = $('<div>')
      .addClass('modal info')
      .html('<span class="message">' + message + '</span>');

  $('body').append($info);

  setTimeout(function() {
    $info.remove();
  }, 2000);
}

在上面的代码中，首先通过jQuery创建了一个div，并为其添加了modal和info两个类名，用于控制该div的样式。然后，将信息消息添加到该div中。最后，将该div添加到body元素中，以显示出信息框。同时，通过定时器来自动移除该信息框。

确认框

确认框通常用于提示用户确认某些操作或者显示一些选择项。我们可以通过jQuery来实现一个简单的确认框，代码如下：

function showConfirm(message, callback) {
  var $confirm = $('<div>')
      .addClass('modal confirm')
      .html('<span class="message">' + message + '</span>' +
            '<button class="confirm-btn">确认</button>' +
            '<button class="cancel-btn">取消</button>');

  $('body').append($confirm);

  $confirm.find('.confirm-btn').on('click', function() {
    $confirm.remove();
    callback && callback(true);
  });

  $confirm.find('.cancel-btn').on('click', function() {
    $confirm.remove();
    callback && callback(false);
  });
}

在上面的代码中，首先通过jQuery创建了一个div，并为其添加了modal和confirm两个类名，用于控制该div的样式。然后，将确认消息、确认按钮和取消按钮添加到该div中。最后，将该div添加到body元素中，以显示出确认框。同时，注册了确认按钮和取消按钮的点击事件，当点击确认按钮时，移除该确认框元素，并执行回调函数，并将参数设置为true，表示用户确认了操作，当点击取消按钮时，移除该确认框元素并执行回调函数，并将参数设置为false，表示用户取消了操作。

示例说明

以上的代码只是实现模态提示框的基本代码，如果希望能够正常显示样式，我们还需要创建一些基本的样式表。这里提供一个简单的样式表，供参考：

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.75);
}

.modal .message {
  display: block;
  margin-bottom: 1em;
  font-size: 1.2em;
  text-align: center;
  color: #fff;
}

.modal .close {
  display: block;
  margin: 1em auto 0;
  padding: 0.5em 1em;
  border: 1px solid #fff;
  font-size: 1.2em;
  color: #fff;
  cursor: pointer;
}

.modal .confirm-btn,
.modal .cancel-btn {
  display: block;
  margin: 1em auto 0;
  padding: 0.5em 1em;
  border: 1px solid #fff;
  font-size: 1.2em;
  color: #fff;
  cursor: pointer;
}

.modal .confirm-btn {
  background: #88a53c;
}

.modal .cancel-btn {
  background: #d15b47;
}

使用以上的样式表，我们可以看到各种模态框的样式效果。可以通过调整样式表中的样式，来控制模态框的外观，实现更加多样化的提示框效果。

示例说明：

我们可以通过在页面上添加一个测试按钮来触发不同的模态提示框，代码如下：

<body>
  <button id="test-alert">测试警告框</button>
  <button id="test-info">测试信息框</button>
  <button id="test-confirm">测试确认框</button>
  <script src="js/jquery.min.js"></script>
  <script src="js/modal.js"></script>
</body>

其中，test-alert按钮用于测试警告框，test-info按钮用于测试信息框，test-confirm按钮用于测试确认框。

在modal.js文件中，我们可以添加相应的代码来实现模态框的展示，代码如下：

$(function() {
  $('#test-alert').on('click', function() {
    showAlert('这是一个警告框！');
  });

  $('#test-info').on('click', function() {
    showInfo('这是一个信息框！');
  });

  $('#test-confirm').on('click', function() {
    showConfirm('确认要继续吗？', function(result) {
      if (result) {
        console.log('用户确认操作');
      } else {
        console.log('用户取消操作');
      }
    });
  });
});

在以上代码中，通过jQuery选择器获取了三个测试按钮，并为它们添加了点击事件。当用户点击某个按钮时，将会触发相应的模态提示框的展示。在测试确认框时，同时传递了一个回调函数，用于处理用户的操作结果。

以上就是实现多种模态提示框的代码和示例说明，希望对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery学习笔记(2)–用jquery实现各种模态提示框代码及项目构架 - Python技术站

jQuery学习笔记(2)–用jquery实现各种模态提示框代码及项目构架

简介

项目构架

实现模态提示框的代码

警告框

信息框

确认框

示例说明

相关文章