在警告框中显示信息并接受用户输入-标题、选择选项、确认、取消

Display information and take user input in alert box - heading, select options, confirm, cancel

本文关键字：标题 输入 选择 取消 确认 选项 用户 警告 显示 信息      更新时间：2023-09-26

我正在调用一个警报框，但要求我必须在该框中显示一些信息，并接受用户的一点输入。

我有一个标题，选择选项从用户那里获得原因，并确认按钮和删除按钮。

以下是的这些元素

<div style="width:50%;margin-left:auto;margin-right:auto;border:1px solid;padding:20px">
    <h4 style="margin-top:0px">Alert</h4>
    <p>
        Please select a reason from the list. <i>(required)</i>
    </p>
    <select style="width:100%">
        <option></option>
        <option>Reason one</option>
        <option>Reason two</option>
        <option>Reason three</option>
    </select>
    &nbsp;
    <div style="float:right;padding-top:10px">
        <button type="button">Confirm</button>
        <button type="button">Close</button>
    </div>
</div>

有可能把这么多信息放在警告框里吗？提前感谢！

在我看来，不支持在警报框中显示那么多信息。但是，您可以使用引导模式来实现此目的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <link data-require="bootstrap-css" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />
    <link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
    <script data-require="jquery" data-semver="1.9.1" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script data-require="bootstrap" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
  </head>
  <body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Call Alert Box
    </button>
    
    <div class="modal fade" id="myModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">Alert</h4>
          </div>
          <div class="modal-body">
            <p>Please select a reason from the list. <i>(required)</i></p>
            <select style="width:100%">
              <option></option>
              <option>Reason one</option>
              <option>Reason two</option>
              <option>Reason three</option>
            </select>
            &nbsp;
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Save changes</button>
            <button type="button" class="btn btn-primary">Close</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
  </body>
</html>

使用javascript警报框无法满足您的需求。获取输入的唯一javascript默认功能是提示（向下滚动到提示）：

window.prompt("sometext","defaultText");

你在灯箱/覆盖图中显示它的方法很好。你可以把它放在你的网站内容上。

就像你的问题评论中提到的@Tikkes一样，jQuery Dialog可能会对你有所帮助。

相关文章：