Javascript 一个非常简单的警告和确认框样式与css_Javascript_Jquery_Html_Css

Javascript 一个非常简单的警告和确认框样式与css

javascript jquery html css

Javascript 一个非常简单的警告和确认框样式与css,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有以下确认框的简单代码 <!DOCTYPE html> <html> <body> <p>Click the button to alert the hostname of the current URL.</p> <button onclick="myFunction()">Try it</button> <script>

我有以下确认框的简单代码

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


单击该按钮以警告当前URL的主机名
试试看
函数myFunction（）{
确认（“确认！！！！”）；
}

但我的问题是，我想用css用一种非常简单的方式来设置OK和Cancel按钮的样式。我正在寻找一个真正简单的解决方案。

警报

和

确认

内置于JavaScript中，并在得到响应之前停止页面执行，这就是允许您执行的操作：

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

任何可以设置样式的confirm（）解决方案都不能包含在

if

语句中。如果希望代码仅在单击“确认”时执行，则需要将该代码作为回调，这使上述代码看起来更像：

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

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

据我所知，您无法更改本机弹出窗口的样式，但您可以通过一些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

后，您将拥有自己的弹出框，您可以自由设置其样式

希望这有帮助

这个问题被问得更多：

答复您不能设置confirm（）函数的样式，因为它是浏览器通用的对话框

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

jQuery-Boxy：

jQuery对话框：

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

教程1:

教程2:

（很抱歉，作为初学者，我不允许放置更多链接）
您不能设置它们的样式。您必须使用自定义模式实现。如果您是为移动设备开发的，我建议保留确认和警报框。它们工作良好，并且在移动浏览器中使用。如果不是手机版，那就制作你自己的DIV并进行风格设计。要设计它们是不可能的。拥有一个样式化对话框的唯一方法就是简单地拥有一个普通的
div
或其他看起来像对话框的元素。最后，我将使用jQuery UI警报框，我想……谢谢大家的回答