簡單的jQuery警報窗口

我是jQuery的初學者，我想在不使用jQuery UI包的情況下構建一個簡單的jQuery警報窗口，我在線上看到了一些插件，但我試圖從頭開始構建它，我想要什麼當點擊一個按鈕時，會彈出一個警告窗口，其中包含ok和cancel按鈕，當點擊ok時，轉到另一個操作，如導航到鏈接，取消關閉窗口。如果任何人都可以給我看一個簡單的代碼示例，這樣我就可以知道如何做到這一點，非常好，謝謝你的幫助。簡單的jQuery警報窗口

所以我假設的HTML代碼結構大概是這樣的：

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

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

來源

2011-10-22 smith

你必須寫自己的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

工作副本

來源

2011-10-22 12:11:23

給Jque ry Dialog a go。 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>

來源

2011-10-22 12:30:25

簡單的jQuery警報窗口

回答

相關問題