logo标签列表

一个非常简单的带有CSS样式的警告框和确认框风格

javascriptjqueryhtmlcss
4
我有一个简单的确认框代码，如下所示:

我有这样一个简单的确认框代码

<!DOCTYPE html>
<html>
    <body>
        <p>Click the button to alert the hostname of the current URL.</p>

        <button onclick="myFunction()">Try it</button>

        <script>
            function myFunction() {
                confirm("Confirm!!!!");
            }
        </script>
    </body>
</html>

但我的问题是，我想用CSS以一种非常简单的方式为“确定”和“取消”按钮设置样式。 我正在寻找一个真正简单的解决方案。

6
您无法对它们进行样式设置，您需要使用自定义的模态实现。 - dfsq
如果你正在开发移动应用，我建议保留确认和警告框。它们在移动浏览器中运行良好并且已经被设计好了。如果不是为移动设备开发，请自己创建DIV并进行样式设置。 - Gary Hayes
无法对其进行样式设置。唯一的方法是使用普通的 div 或其他外观类似于对话框的元素来创建具有样式的对话框。 - markasoftware
最后我会使用jQuery UI警告框，谢谢你们的回答。 - TLSK
3个回答
5
这个问题已经被问得更多了： 答案：你不能样式化 confirm() 函数的对话框，因为它是浏览器通用的。
你将不得不寻找这些替代方案： 你也可以尝试创建自己的对话框。这并不像你要求的那么简单。但是，有很多教程可以找到： （抱歉，作为初学者，我不允许放置更多的链接）
3

alert和confirm是JavaScript内置的函数，它们会阻止页面执行直到得到回答，这也是你可以实现以下功能的原因：

if( confirm('do you want to see this?') ) {
    //show them.
}

如果您想要定制样式的confirm()解决方案被包含在if语句中，这是不可能的。如果你想让代码只在确认按钮被点击时执行，那么你需要将代码作为回调函数，并将以上代码改成这样：

mySpecialConfirm('do you want to see this?', function() {
    //show them
} );

然后，您需要将该函数调用接入创建的确认对话框上的“ok”按钮单击事件中。这意味着从编码角度来看，它本质上更加复杂，更不用说将其连接到HTML表单的代码了。我认为重复造轮子并制作自己的模态框是不值得的。这意味着您需要选择jQuery和jQuery UI，或者jQuery和Bootstrap，或者Dojo Toolkit等，然后从那里寻找他们针对此问题的解决方案，或使用他们的模态框。

2
据我所知，您无法更改本机弹出窗口的样式，但是您可以借助一些JavaScript技巧创建自己的弹出窗口。
function promptWindow() {
  // Create template
  var box = document.createElement("div");
  var cancel = document.createElement("button");
  cancel.innerHTML = "Cancel";
  cancel.onclick = function() { document.body.removeChild(this.parentNode) }
  var text = document.createTextNode("Please enter a message!");
  var input = document.createElement("textarea");
  box.appendChild(text);
  box.appendChild(input);
  box.appendChild(cancel);

  // Style box
  box.style.position = "absolute"; 
  box.style.width = "400px";
  box.style.height = "300px";

  // Center box.
  box.style.left = (window.innerWidth / 2) -100;
  box.style.top = "100px";

  // Append box to body
  document.body.appendChild(box);

}

调用promptWindow后，您将拥有自己的弹出框，您可以自由地进行样式设置！希望这能帮到您！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接