<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../css/qfq-bs.css">
<title>Alert</title>
</head>
<body>
<button id="showalert1">Show Alert 1</button>
<button id="showalert2">Show Alert 2</button>
<button id="showalert3">Show Alert 3 primed</button>
<button id="showmanyalert1">Show Many Alert 1</button>
<button id="showmodalalert1">Show Modal Alert 1</button>
<a id="alertinlink" onclick="
var alert = new QfqNS.Alert('Text being displayed', 'info', [
{ label: 'OK', eventName: 'ok' },
{ label: 'Cancel', eventName: 'cancel'}
]);
alert.on('alert.ok', function() {
window.location = $('#alertinlink').attr('href');
});
alert.show();
return false;
" href="http://www.google.ch">Link alert</a>
<div style="margin-top: 20ex">
<button onclick="alert('Button clicked')">Modal test button</button>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/EventEmitter.min.js"></script>
<script src="../js/qfq.debug.js"></script>
<div class="alert-interactive border-success">
<p class="title">Success!</p>
<p class="body">Congratulations, your dataset has been saved successfully</p>
<p class="buttons">
<button type="button" class="btn btn-default">Ok</button>
<button type="button" class="btn btn-default">Cancel</button>
</p>
</div>
<div class="alert-interactive border-info" style="left: 54%; top: 225px;">
<p class="title">Information</p>
<p class="body">Congratulations, your dataset has been saved successfully</p>
<p class="buttons">
<button type="button" class="btn btn-default">Ok</button>
<button type="button" class="btn btn-default">Cancel</button>
</p>
</div>
<div class="alert-interactive border-warning" style="left: 58%; top: 250px;">
<p class="title">Warning</p>
<p class="body">Congratulations, your dataset has changed</p>
<p class="buttons">
<button type="button" class="btn btn-default">Ok</button>
<button type="button" class="btn btn-default">Cancel</button>
</p>
</div>
<div class="alert-interactive border-error" style="left: 62%; top: 275px;">
<p class="title">Error</p>
<p class="body">Congratulations, your dataset hasn't been saved!</p>
<p class="buttons">
<button type="button" class="btn btn-default">Try Again</button>
<button type="button" class="btn btn-default">Cancel</button>
</p>
</div>
</body>
</html>