Question

我是HTML设计的新手。我的前端是 Angular.js 。在我的应用程序中，执行某些方法并提示用户输入。在用户输入之后，它继续进行其余的逻辑。

目前，我使用简单的confirm()或prompt()。但我需要有html模板而不是典型的消息。我尝试过类似下面的内容。

var htmlStr = "<div> This is nice html with <h1>header</h1> and body content </div>";
var action = prompt(htmlStr);

它显示为字符串而不是html。

任何想法如何转换为HTML？我们非常欢迎任何帮助/建议。

Answer 1

这是不可能的。修改prompt，alert或confirm弹出窗口中文本的范围仅限于向字符串添加\n字符以添加折断线。（可能是其他一些转义字符，但不允许使用HTML。）这些弹出窗口的样式完全取决于浏览器。

window.prompt()

您可以使用根据自己的喜好设置position:absolute或relative div创建自定义模式。

Answer 2

提示方法仅将字符串作为其参数，因此，您传入的任何html代码也将仅作为字符串。如果您的项目是angularjs，那么我建议您查看angular-ui Bootstrap

这具有针对所有常见用例的原生角度指令。您可以使用modal获取用户输入并根据需要设置样式。

Answer 3

您可以使用sweetalert显示自定义的javascript提示或确认框。

swal({
    title: "An input!",
    text: "Write something interesting:",
    type: "input",   showCancelButton: true,
    closeOnConfirm: false,
    animation: "slide-from-top",
    inputPlaceholder: "Write something" },
    function (inputValue) {
        if(inputValue === false) {
            return false;
        }

        if(inputValue === "") {
            swal.showInputError("You need to write something!");

            return false;
        }

        swal("Nice!", "You wrote: " + inputValue, "success");
    }
);

demo https://jsfiddle.net/szf1jgog/

document.querySelector('button').onclick = function() {
  swal({
      title: "An input!",
      text: 'Write something interesting:',
      type: 'input',
      showCancelButton: true,
      closeOnConfirm: false,
      animation: "slide-from-top",
      inputPlaceholder: "Write something",
    },
    function(inputValue) {
      if (inputValue === false) return false;

      if (inputValue === "") {
        swal.showInputError("You need to write something!");
        return false;
      }

      swal("Nice!", 'You wrote: ' + inputValue, "success");

    });
};

<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<button>Alert me</button>

自定义javascript提示和确认框

3 个答案: