Question

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

<!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以一种非常简单的方式设置OK和Cancel按钮的样式。我正在寻找一个真正简单的解决方案。

Answer 1

此问题已被提出更多：

答案; 你不能设置确认（）功能它的对话框，因为它是浏览器通用的。

您必须搜索以下替代方案：

jQuery Boxy ：onehackoranother.com/projects/jquery/boxy/
jQuery对话：jqueryui.com/dialog/#modal-confirmation

您也可以尝试创建自己的对话框。你要求的并不是那么简单。但是，可以找到许多教程：

教程1： www.developphp.com/view.php?tid=1385
教程2： tutorialzine.com/2010/12/better-confirm-box-jquery-css3/

（对不起，作为初学者，我不允许放置更多链接）

Answer 2

alert和confirm内置于JavaScript和STOP页面执行，直到它们被回答，这是允许您这样做的：

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

您可以设置样式的任何confirm（）解决方案都无法包含在if语句中。如果您希望代码仅在单击confirm时执行，那么您需要将该代码作为回调，这使得上面的代码看起来更像这样：

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

然后，您必须将该函数调用连接到“ok”按钮，然后单击您创建的确认对话框。这意味着它从编码的角度来看本身就更复杂，更不用说必须将其连接到HTML表单的代码。我会说重新发明轮子并制作自己的模态是不值得的。这意味着您需要选择jQuery和jQuery UI，或jQuery和Bootstrap，或Dojo Toolkit等，然后从那里寻找他们执行此操作的解决方案，或者使用他们的模态。

Answer 3

据我所知，你不能改变原生弹出窗口的风格，但是你可以用一些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后，您有自己的弹出框，您可自由选择样式！

希望这有帮助！

一个非常简单的警报和确认框样式与CSS

3 个答案: