Question

我正在呼叫一个警告框，但要求是我要在该框中显示一些信息并从用户那里获取一些信息。

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

以下是这些元素

＆＃13;

<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>

＆＃13;

是否可以将这么多信息放在警报框中？提前谢谢！

Answer 1

使用javascript警告框无法满足您的要求。只有javascript默认函数才能获得输入prompt（向下滚动到提示）：

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

您在灯箱/叠加层中显示它的方法很好。你可以把它放在你的网站内容上。

就像@Tikkes在您的问题评论中提到的那样，jQuery Dialog可能对您有帮助。

Answer 2

在我看来，没有人支持在警告框中显示那么多信息。但是，您可以使用bootstrap模式来实现此目的。

＆＃13;

<!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>

＆＃13;

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

2 个答案: