2016-09-19 28 views
0

點擊完成。我沒有得到自定義確認框與是沒有選擇。用'是'自定義確認消息,沒有選項不來

 <html> 
     <head> 
<style type="text/css"> 
      body { font-family: sans-serif; } 
      #confirmBox 
      { 
     display: none; 
     background-color: #eee; 
     border-radius: 5px; 
     border: 1px solid #aaa; 
     position: fixed; 
     width: 300px; 
     left: 50%; 
     margin-left: -150px; 
     padding: 6px 8px 8px; 
     box-sizing: border-box; 
     text-align: center; 
    } 
    #confirmBox .button { 
     background-color: #ccc; 
     display: inline-block; 
     border-radius: 3px; 
     border: 1px solid #aaa; 
     padding: 2px; 
     text-align: center; 
     width: 80px; 
     cursor: pointer; 
    } 
    #confirmBox .button:hover 
    { 
     background-color: #ddd; 
    } 
    #confirmBox .message 
    { 
     text-align: left; 
     margin-bottom: 8px; 
    } 

    </style> 
     <script language="javascript" src="scripts/jquery-latest.js"></script> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"/> 
     <script type="text/javascript"> 
     function doConfirm(msg, yesFn, noFn) { 
      alert("Inside"); 
      var confirmBox = $("#confirmBox"); 
      alert("confirmBox"); 
      confirmBox.find(".message").text(msg); 
      confirmBox.find(".yes,.no").unbind().click(function() { 
       confirmBox.hide(); 
      }); 
      confirmBox.find(".yes").click(yesFn); 
      confirmBox.find(".no").click(noFn); 
      confirmBox.show(); 
     } 
     function isAnchorTagClicked(){ 
     alert("yes"); 
     doConfirm("Are you sure?", function yes() 
        { 
         alert("Yes Clicked"); 
        }, function no() 
        { 
         // do nothing 
        }); 
     } 

     </script> 
     </head> 
     <body> 
     <div id="confirmBox"> 
      <div class="message"></div> 
      <span class="button yes">Yes</span> 
      <span class="button no">No</span> 
     </div> 
     <button onclick="isAnchorTagClicked()">Done</button> 
     </body> 
     <html> 

這兩個警報我進入功能doConfirm()。但確認窗口未到。請幫助我。

+0

你錯過上的按鈕onclick事件 –

+0

添加缺少的報價,但仍然沒有運氣收盤報價。 – shiva

+0

爲什麼你有兩個jQuery副本? – epascarello

回答

0
$("#button").click(function{ 
$('<div></div>').appendTo('body') 
    .html('<div><h6>Are you sure?</h6></div>') 
    .dialog({ 
     title: 'Conform message', 
     modal: true, 
     zIndex: 99, 
     autoOpen: false, 
     width: 'auto', 
     resizable: false, 
     buttons: { 
      Yes: function() { 
       //some text  
       $(this).dialog("close"); 
      }, 
      No: function() { 
       $(this).dialog("close"); 
      } 
     }, 
     close: function (event, ui) { 
      $(this).remove(); 
     } 
    }); 
}); 
+0

Onclick我需要顯示如上所示的警報消息isAnchorTagClicked()。之後只應顯示確認信息。 – shiva

0

嘗試下面的代碼 -

function doConfirm(msg, yesFn, noFn) { 
 
     alert("Inside"); 
 
     var confirmBox = $("#confirmBox"); 
 
     alert("confirmBox"); 
 
     confirmBox.find(".message").text(msg); 
 
     confirmBox.find(".yes,.no").unbind().click(function() { 
 
      confirmBox.hide(); 
 
     }); 
 
     confirmBox.find(".yes").click(yesFn); 
 
     confirmBox.find(".no").click(noFn); 
 
     confirmBox.show(); 
 
    } 
 
    function isAnchorTagClicked(){ 
 
    alert("yes"); 
 
    doConfirm("Are you sure?", function yes() 
 
       { 
 
        alert("Yes Clicked"); 
 
       }, function no() 
 
       { 
 
        // do nothing 
 
       }); 
 
    }
body { font-family: sans-serif; } 
 
      #confirmBox 
 
      { 
 
     display: none; 
 
     background-color: #eee; 
 
     border-radius: 5px; 
 
     border: 1px solid #aaa; 
 
     position: fixed; 
 
     width: 300px; 
 
     left: 50%; 
 
     margin-left: -150px; 
 
     padding: 6px 8px 8px; 
 
     box-sizing: border-box; 
 
     text-align: center; 
 
    } 
 
    #confirmBox .button { 
 
     background-color: #ccc; 
 
     display: inline-block; 
 
     border-radius: 3px; 
 
     border: 1px solid #aaa; 
 
     padding: 2px; 
 
     text-align: center; 
 
     width: 80px; 
 
     cursor: pointer; 
 
    } 
 
    #confirmBox .button:hover 
 
    { 
 
     background-color: #ddd; 
 
    } 
 
    #confirmBox .message 
 
    { 
 
     text-align: left; 
 
     margin-bottom: 8px; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="confirmBox"> 
 
     <div class="message"></div> 
 
     <span class="button yes">Yes</span> 
 
     <span class="button no">No</span> 
 
    </div> 
 
    <button onclick="isAnchorTagClicked()">Done</button>

+0

它的工作原理。謝謝 – shiva

0

你的代碼工作對我很好,當我固定的自封閉script標籤並刪除重複的參考jQuery的。

<script language="javascript" src="scripts/jquery-latest.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"/> 

所以這兩行只是變成

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 

而且你的代碼運行。


function doConfirm(msg, yesFn, noFn) { 
 
    var confirmBox = $("#confirmBox"); 
 
    confirmBox.find(".message").text(msg); 
 
    confirmBox.find(".yes,.no").unbind().click(function() { 
 
    confirmBox.hide(); 
 
    }); 
 
    confirmBox.find(".yes").click(yesFn); 
 
    confirmBox.find(".no").click(noFn); 
 
    confirmBox.show(); 
 
} 
 

 
function isAnchorTagClicked() { 
 
    doConfirm("Are you sure?", function yes() { 
 
    alert("Yes Clicked"); 
 
    }, function no() { 
 
    // do nothing 
 
    }); 
 
}
#confirmBox { display : none; }
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
 
<div id="confirmBox"> 
 
    <div class="message"></div> 
 
    <span class="button yes">Yes</span> 
 
    <span class="button no">No</span> 
 
</div> 
 
<button onclick="isAnchorTagClicked()">Done</button>

相關問題