Question

我是jQuery的初学者，我想在不使用jQuery UI包的情况下构建一个简单的jQuery警报窗口，我在网上看到了一些插件，但我试图从头开始构建它，我想要的是当按钮被点击，它出现一个提示窗口，其中有确定和取消按钮，当点击确定时转到另一个操作，如导航到链接并取消关闭窗口。如果有人能给我一个快速的代码示例，以便我知道如何做到这一点会很棒，谢谢你的帮助。

所以我假设html代码结构可能是这样的：

 <input type = "button" value="show alert">

<script>
 $("input").click(function(){
   )};
 </script>

Answer 1

你必须编写自己的CSS，但这是一个例子;

HTML：

<input type="button" id="redirect" value="show alert" />
<div id="alertWindow">
    You'll be redirect to google.com. Continue?
    <br /><br />
    <input type="button" id="btnOk" value="OK" /> <input type="button" id="btnCancel" value="Cancel" />
</div>

CSS：

#alertWindow {
  display: none;
  text-align: center;
  border: 1px solid #333;
  width: 200px;
  height: 80px;
  border-radius: 5px;
  padding: 10px;
}
#btnOk, #btnCancel { width: 70px; }

最后是Javascript：

$(function() {
    $("#redirect").click(function(){
      $('#alertWindow').show();
      return false;
    });
    $('#btnCancel').click(function() {
        $('#alertWindow').hide();
    });
    $('#btnOk').click(function() {
        location.href = 'http://www.google.com';
        return false;
    });
});

Here是jsFiddle

上此代码的工作副本

Answer 2

让Jquery Dialog一试。 http://jqueryui.com/demos/dialog/

<input type = "button" value="show alert">

<script>
 $("input").click(function(){
       $("#myDiv").dialog({
            buttons: {
                 "OK": function() {
                        window.location.href = //my url
                 },
                 "Cancel": function() {
                         this.dialog("close");
                 }
             })
             //put all your other dialog options here
        });
   )};
 </script>

简单的jQuery警报窗口

2 个答案: