js的弹出框怎么加文本框输入

JS的弹出框加文本框输入的方法有很多，其中主要包括使用prompt方法、使用自定义的HTML弹出框（如模态框）以及结合CSS和JavaScript实现自定义弹出框。这里将详细介绍使用自定义的HTML弹出框的方法，因为这种方法更灵活，用户体验更好。

一、使用prompt方法

prompt是JavaScript内置的方法，用于弹出一个带有输入框的对话框。其语法非常简单，但功能有限。例如：

let userInput = prompt("请输入你的名字：");

alert("你好，" + userInput);

二、使用自定义的HTML弹出框

1、创建基本的HTML结构

首先，我们需要在HTML文件中创建一个基础的弹出框结构：

<div id="customModal" class="modal">

  <div class="modal-content">
    <span class="close-btn">&times;</span>
    <p>请输入你的名字：</p>
    <input type="text" id="userInput" />
    <button id="submitBtn">提交</button>
  </div>
</div>

2、添加CSS样式

接下来，我们需要为弹出框添加一些基本的样式：

.modal {

  display: none; 
  position: fixed; 
  z-index: 1; 
  padding-top: 100px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4); 
}
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
.close-btn {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close-btn:hover,
.close-btn:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

3、添加JavaScript功能

最后，我们需要为弹出框添加显示和隐藏的功能，并处理用户的输入：

document.addEventListener("DOMContentLoaded", function() {

  var modal = document.getElementById("customModal");
  var btn = document.getElementById("openModalBtn");
  var span = document.getElementsByClassName("close-btn")[0];
  var submitBtn = document.getElementById("submitBtn");
  btn.onclick = function() {
    modal.style.display = "block";
  }
  span.onclick = function() {
    modal.style.display = "none";
  }
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
  submitBtn.onclick = function() {
    var userInput = document.getElementById("userInput").value;
    alert("你好，" + userInput);
    modal.style.display = "none";
  }
});

三、结合CSS和JavaScript实现自定义弹出框

1、引入必要的库（例如Bootstrap）

使用Bootstrap可以快速创建美观的弹出框：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

2、创建Bootstrap模态框

<div class="modal" id="myModal">

  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">输入名字</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <input type="text" id="userInput" class="form-control" placeholder="请输入你的名字">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="submitBtn">提交</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

3、添加JavaScript功能

$(document).ready(function(){

  $("#submitBtn").click(function(){
    var userInput = $("#userInput").val();
    alert("你好，" + userInput);
    $("#myModal").modal('hide');
  });
});

四、总结

通过以上方法，我们可以在JavaScript中实现带有文本框输入的弹出框。其中，使用自定义的HTML弹出框（如模态框）是最灵活和用户体验最好的方式。关键在于：创建HTML结构、添加必要的CSS样式、实现JavaScript功能。当然，使用Bootstrap等前端框架可以快速创建美观的弹出框，并且更加便于管理和维护。

相关问答FAQs：

1. 如何在JavaScript弹出框中添加文本框输入？
在JavaScript中，您可以使用prompt()函数来创建一个弹出框，并在其中添加一个文本框以供用户输入。使用以下代码示例：

var userInput = prompt("请输入您的文本：");

2. 如何在JavaScript弹出框中显示默认文本？
如果您希望在弹出框的文本框中显示默认文本，可以通过在prompt()函数的参数中添加文本来实现。例如：

var userInput = prompt("请输入您的文本：", "默认文本");

这样，当弹出框出现时，文本框中将显示默认文本。

3. 如何在JavaScript弹出框中获取用户输入的值？
要获取用户在弹出框中输入的值，可以将prompt()函数的返回值存储在一个变量中。例如：

var userInput = prompt("请输入您的文本：");
console.log(userInput); // 将用户输入的值打印到控制台

通过将prompt()函数的返回值赋给变量userInput，您可以随后使用该变量来获取用户输入的值。