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

我正在调用一个警报框，但要求我必须在该框中显示一些信息并从用户那里获取一些输入。

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

这是这些元素

<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 - 在警报框中显示信息并接受用户输入 - 标题、选择选项、确认、取消，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38611145/

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

上一篇：javascript - Tap 的函数签名(K 组合器)

下一篇：javascript - 比较 JavaScript 中的两个对象数组