js怎么运行选项框

JS怎么运行选项框

通过JavaScript运行选项框，可以使用多种方法，如prompt()、confirm()、alert()等，或使用自定义的HTML表单元素并通过JavaScript进行操作。 这些方法可以分别用于不同的交互场景，例如获取用户输入、确认用户操作或简单地向用户显示信息。接下来，我们将详细讨论其中一种方法：通过HTML与JavaScript结合创建自定义选项框。

一、使用内置函数

1、`alert()`函数

alert()函数用于向用户显示一个消息框，只包含一个“确定”按钮。它通常用于向用户显示一些提示信息。

alert("这是一个提示信息！");

2、`confirm()`函数

confirm()函数用于向用户显示一个带“确定”和“取消”按钮的对话框。它返回一个布尔值，用户点击“确定”返回 true，点击“取消”返回 false。

let result = confirm("你确定要执行此操作吗？");
if (result) {
    console.log("用户点击了确定");
} else {
    console.log("用户点击了取消");
}

3、`prompt()`函数

prompt()函数用于向用户显示一个输入框，并返回用户输入的值。如果用户点击“确定”，返回输入的内容；如果用户点击“取消”，返回 null。

let userInput = prompt("请输入你的名字：");
if (userInput !== null) {
    console.log("用户输入了：" + userInput);
} else {
    console.log("用户取消了输入");
}

二、自定义选项框

虽然内置函数非常方便，但在实际项目中，通常需要自定义选项框以获得更好的用户体验。通过HTML和CSS与JavaScript结合，可以创建更加灵活和美观的选项框。

1、创建HTML结构

首先，我们需要创建一个基本的HTML结构，包括一个隐藏的选项框。

<!DOCTYPE html>
<html>
<head>
    <title>自定义选项框</title>
    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.4);
            padding-top: 60px;
        }
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h2>自定义选项框示例</h2>
<button id="openModalBtn">打开选项框</button>
<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>这是一个自定义选项框。</p>
        <button id="confirmBtn">确定</button>
        <button id="cancelBtn">取消</button>
    </div>
</div>
<script>
    // 获取选项框元素
    let modal = document.getElementById("myModal");
    // 获取打开选项框按钮
    let btn = document.getElementById("openModalBtn");
    // 获取关闭按钮
    let span = document.getElementsByClassName("close")[0];
    // 当用户点击按钮时打开选项框
    btn.onclick = function() {
        modal.style.display = "block";
    }
    // 当用户点击关闭按钮时关闭选项框
    span.onclick = function() {
        modal.style.display = "none";
    }
    // 当用户点击确定按钮时执行操作
    document.getElementById("confirmBtn").onclick = function() {
        console.log("用户点击了确定");
        modal.style.display = "none";
    }
    // 当用户点击取消按钮时关闭选项框
    document.getElementById("cancelBtn").onclick = function() {
        console.log("用户点击了取消");
        modal.style.display = "none";
    }
    // 当用户点击选项框外部时关闭选项框
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>
</body>
</html>

2、详细解释

HTML结构：包含一个按钮用于打开选项框，以及一个隐藏的选项框元素（modal）。
CSS样式：设置选项框的样式和隐藏状态。
JavaScript逻辑：处理选项框的显示与隐藏，以及用户点击按钮后的操作。

3、功能扩展

通过JavaScript和CSS，可以进一步扩展自定义选项框的功能，例如增加输入框、下拉菜单、复选框等。以下是一个包含输入框的示例：

<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>请输入你的名字：</p>
        <input type="text" id="userName" />
        <button id="confirmBtn">确定</button>
        <button id="cancelBtn">取消</button>
    </div>
</div>
<script>
    document.getElementById("confirmBtn").onclick = function() {
        let userName = document.getElementById("userName").value;
        if (userName) {
            console.log("用户输入了：" + userName);
        } else {
            console.log("用户没有输入名字");
        }
        modal.style.display = "none";
    }
</script>

这样，通过结合HTML、CSS和JavaScript，可以创建功能丰富且用户体验良好的自定义选项框。

三、使用第三方库

除了内置函数和自定义选项框外，还可以使用一些第三方库来实现更加复杂和美观的选项框。这些库通常提供了丰富的API和样式，能够快速集成到项目中。

1、SweetAlert

SweetAlert是一个流行的替代原生alert()、confirm()和prompt()的库，它提供了更美观的对话框。

安装

可以通过CDN引入SweetAlert：

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

使用示例

// 简单的提示框
swal("Hello world!");
// 带有按钮的确认框
swal({
  title: "你确定吗?",
  text: "一旦删除, 你将无法恢复这个文件!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    swal("文件已被删除!", {
      icon: "success",
    });
  } else {
    swal("你的文件是安全的!");
  }
});

2、Bootstrap Modal

如果你的项目已经使用了Bootstrap，可以直接利用Bootstrap的模态框组件来实现选项框功能。

HTML结构

<!-- 按钮触发模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  打开模态框
</button>
<!-- 模态框结构 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        这是一个Bootstrap模态框。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

JavaScript逻辑

Bootstrap的模态框不需要额外的JavaScript代码来实现基本功能，但你可以通过事件监听器扩展其功能：

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget); // 触发模态框的按钮
  var recipient = button.data('whatever'); // 通过data-*属性传递数据
  var modal = $(this);
  modal.find('.modal-title').text('新消息发送给 ' + recipient);
  modal.find('.modal-body input').val(recipient);
});

四、总结

通过JavaScript运行选项框有多种方法，可以根据实际需求选择合适的方法。内置函数如alert()、confirm()和prompt()简单易用，但功能有限，自定义选项框则提供了更大的灵活性和美观性。此外，使用第三方库如SweetAlert和Bootstrap Modal，可以快速实现复杂的选项框功能，提升用户体验。通过合理选择和使用这些方法，可以有效提升Web应用的交互性和用户体验。