简体   繁体   English

Alertify JS确认不适用于按钮链接

[英]Alertify JS confirm not working with button link

I had a problem when using alertify JS confirm. 使用Alertify JS确认时出现问题。 when I click the button, alertify confirm does not appear, but immediately redirects to the link. 当我单击按钮时,alertify确认不会出现,而是立即重定向到链接。 The following script link button and alertify confirm script. 以下脚本链接按钮和Alertify确认脚本。

function CheckDelete(){
alertify.confirm("This is a confirm dialog.",
  function(){
    alertify.success('Ok');
  },
  function(){
    alertify.error('Cancel');
  });}

<a href="http://google.com"><button type="button" class="btn btn-danger" onClick="return CheckDelete();"><i class="fa fa-remove"></i> Delete</button></a>

check in : https://jsfiddle.net/r2fs0p45/ 签入: https : //jsfiddle.net/r2fs0p45/

Supposedly when I clicked the button, confirm dialog should appears and then go to the link. 当我单击按钮时,应该出现确认对话框,然后转到链接。 but according to my code above, when I click the button, It directly redirect to the link, so confirm dialog does not appear. 但是根据上面的代码,当我单击按钮时,它直接重定向到链接,因此不会出现确认对话框。 Does anyone know how to overcome it? 有谁知道如何克服它?

CheckDelete() needs to return false to prevent the default action CheckDelete()需要返回false以防止执行默认操作

function CheckDelete(){
    alertify.confirm("This is a confirm dialog.",
        function(){
            alertify.success('Ok');
        },
        function(){
            alertify.error('Cancel');
    });
    return false;
}

Do not have button in a tag in your markup. 标记中a标签中没有button

To navigate user, on OK button callback, use window.location.href to redirect user. 要导航用户,请在“ OK按钮回调上,使用window.location.href重定向用户。

Try this: 尝试这个:

 function CheckDelete() { alertify.confirm("This is a confirm dialog.", function(input) { if (input) { alertify.success('Ok'); window.location.href = 'http://google.com'; } else { alertify.error('Cancel'); } }); } 
 .alertify, .alertify-show, .alertify-log { -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); -ms-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */ } .alertify-hide { -webkit-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045); -moz-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045); -ms-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045); -o-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045); transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045); /* easeInBack */ } .alertify-log-hide { -webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); -ms-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); /* easeInBack */ } .alertify-cover { position: fixed; z-index: 99999; top: 0; right: 0; bottom: 0; left: 0; background-color: #f5f5f5; opacity: 0.5; } .alertify-cover-hidden { display: none; } .alertify { position: fixed; z-index: 99999; top: 150px; left: 50%; width: 400px; margin-left: -215px; opacity: 1; } .alertify-hidden { -webkit-transform: translate(0, -150px); -moz-transform: translate(0, -150px); -ms-transform: translate(0, -150px); -o-transform: translate(0, -150px); transform: translate(0, -150px); opacity: 0; display: none; } /* overwrite display: none; for everything except IE6-8 */ :root *> .alertify-hidden { display: block; } .alertify-logs { position: fixed; z-index: 5000; bottom: 10px; right: 10px; width: 300px; } .alertify-logs-hidden { display: none; } .alertify-log { display: block; margin-top: 10px; position: relative; right: -300px; opacity: 0; } .alertify-log-show { right: 0; opacity: 1; } .alertify-log-hide { -webkit-transform: translate(300px, 0); -moz-transform: translate(300px, 0); -ms-transform: translate(300px, 0); -o-transform: translate(300px, 0); transform: translate(300px, 0); opacity: 0; } .alertify-dialog { padding: 25px; } .alertify-resetFocus { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .alertify-inner { text-align: center; } .alertify-text { margin-bottom: 15px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 100%; } .alertify-buttons {} .alertify-button, .alertify-button:hover, .alertify-button:active, .alertify-button:visited { background: none; text-decoration: none; border: none; /* line-height and font-size for input button */ line-height: 1.5; font-size: 100%; display: inline-block; cursor: pointer; margin-left: 5px; } .alertify-isHidden { display: none; } @media only screen and (max-width: 680px) { .alertify, .alertify-logs { width: 90%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .alertify { left: 5%; margin: 0; } } /** * Twitter Bootstrap Look and Feel * Based on http://twitter.github.com/bootstrap/ */ .alertify, .alertify-log { font-family: sans-serif; } .alertify { background: #FFF; border: 1px solid #8E8E8E; /* browsers that don't support rgba */ border: 1px solid rgba(0, 0, 0, .3); border-radius: 6px; box-shadow: 0 3px 7px rgba(0, 0, 0, .3); -webkit-background-clip: padding; /* Safari 4? Chrome 6? */ -moz-background-clip: padding; /* Firefox 3.6 */ background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ } .alertify-dialog { padding: 0; } .alertify-inner { text-align: left; } .alertify-message { padding: 15px; margin: 0; color: Black; } .alertify-text-wrapper { padding: 0 15px; } .alertify-text { color: #555; border-radius: 4px; padding: 8px; background-color: #FFF; border: 1px solid #CCC; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); } .alertify-text:focus { border-color: rgba(82, 168, 236, .8); outline: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(82, 168, 236, .6); } .alertify-buttons { padding: 8px 15px 8px; background: #F5F5F5; border-top: 1px solid #DDD; border-radius: 0 0 6px 6px; box-shadow: inset 0 1px 0 #FFF; text-align: right; } .alertify-button, .alertify-button:hover, .alertify-button:focus, .alertify-button:active { margin-left: 10px; border-radius: 4px; font-weight: normal; padding: 4px 12px; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); background-image: linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); } .alertify-button:focus { outline: none; box-shadow: 0 0 5px #2B72D5; } .alertify-button:active { position: relative; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05); } .alertify-button-cancel, .alertify-button-cancel:hover, .alertify-button-cancel:focus, .alertify-button-cancel:active { text-shadow: 0 -1px 0 rgba(255, 255, 255, .75); background-color: #E6E6E6; border: 1px solid #BBB; color: #333; background-image: -webkit-linear-gradient(top, #FFF, #E6E6E6); background-image: -moz-linear-gradient(top, #FFF, #E6E6E6); background-image: -ms-linear-gradient(top, #FFF, #E6E6E6); background-image: -o-linear-gradient(top, #FFF, #E6E6E6); background-image: linear-gradient(top, #FFF, #E6E6E6); } .alertify-button-cancel:hover, .alertify-button-cancel:focus, .alertify-button-cancel:active { background: #E6E6E6; } .alertify-button-ok, .alertify-button-ok:hover, .alertify-button-ok:focus, .alertify-button-ok:active { text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); background-color: #04C; border: 1px solid #04C; border-color: #04C #04C #002A80; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); color: #FFF; } .alertify-button-ok:hover, .alertify-button-ok:focus, .alertify-button-ok:active { background: #04C; } .alertify-log { background: #D9EDF7; padding: 8px 14px; border-radius: 4px; color: #3A8ABF; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); border: 1px solid #BCE8F1; } .alertify-log-error { color: #B94A48; background: #F2DEDE; border: 1px solid #EED3D7; } .alertify-log-success { color: #468847; background: #DFF0D8; border: 1px solid #D6E9C6; } 
 <script src="http://fabien-d.github.io/alertify.js/assets/js/lib/alertify/alertify.min.js"></script> <button type="button" class="btn btn-danger" onClick="CheckDelete();"><i class="fa fa-remove"></i> Delete</button> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM