This article introduces the example of pure JavaScript to realize the message prompt effect. It is a plug-in based on notie.js that can produce Alert prompt box, confirmation box and message box with input. It is shared with everyone for your reference. The specific content is as follows
Rendering:
Implementation code:
html code:
<br><br><br><br><br><br> <article class="zzsc"> <div class="div-ext"> <div class="div-int"> <span>Test notie with these buttons:</span> <br> <button onclick="success();">Success</button> <button onclick="warning();">Warning</button> <button onclick="error();">Error</button><br> <button onclick="info();">Information</button> <button onclick="confirm();">Confirm</button> <button onclick="input();">Input</button> <br> </div> </div> </article>
js code:
function success() { notie.alert(1, 'Success!', 2); } function warning() { notie.alert(2, 'Warning<br><b>with</b><br><i>HTML</i><br><u>included.</u>', 2); } function error() { notie.alert(3, 'Error.', 2); } function info() { notie.alert(4, 'Information.', 2); } function confirm() { notie.confirm('Are you sure you want to do that?<br><b>That\'s a bold move...</b>', 'Yes', 'Cancel', function () { notie.alert(1, 'Good choice!', 2); }); } function input() { notie.input('Please enter your email address:', 'Submit', 'Cancel', 'email', 'name@example.com', function (value_entered) { notie.alert(1, 'You entered: ' + value_entered, 2); }); }
I hope this article will be helpful to everyone learning JavaScript programming.