Open findelallc opened 3 years ago
I don't exactly understand what you are asking. Are you asking for a close button inside a pre-compiled alert?
in simple word YES, now I manage to write click handler to close it, I think it should have an option to close with animation, the same way it's opened.
But you can just put a close button inside your pre-compiled alert like so: <button class="close" data-dismiss="alert" type="button" aria-label="Close">×</button>
. Clicking that will dismiss that alert, exactly like it dismisses the other sticky alerts.
No it doesn't work.
Kindly post the code or at least make a Codepen. It worked for me, and there is no reason it shouldn't. Edit: https://jsfiddle.net/pg2h8dt7/
I am using react next js to work with your plugin
<div className="sticky-alerts bottom-0" style={{top: "auto", right: -75}}>
<div className="alert card shadow-lg border-0 w-three-quarter filled mr-0" id="precompiled-alert-1">
<div className="d-flex justify-content-between">
<h6 className="text-theme-color my-auto font-weight-bold">Blockchain Metrics Notification</h6>
<button class="close" data-dismiss="alert" type="button" aria-label="Close">×</button>
</div>
</div>
</div>
Since you are using React, I recommend the following:
halfmoon.onDOMContentLoaded()
method, preferably on route change. Reference: https://www.gethalfmoon.com/docs/download/#using-npmPlease let me know if that solves your problem. If this doesn't solve it, I would recommend posting a question on a React/Next.JS support forum, maybe even Stack Overflow.
This is how I achieved it -
<div className="sticky-alerts bottom-0" style={{top: "auto", right: -75}}>
<div className="alert card shadow-lg border-0 w-three-quarter filled mr-0" id="precompiled-alert-1">
<div className="d-flex justify-content-between">
<h6 className="text-theme-color my-auto font-weight-bold">Blockchain Metrics Notification</h6>
<a onClick={this.dismissNotification.bind(this)} className="btn btn-link text-deep-purple-color my-auto">
<i className="fas fa-times"/>
</a>
</div>
</div>
</div>
Method:
dismissNotification = () => {
document.getElementById("precompiled-alert-1").style.display = "none";
};
I just tried to use Sticky alerts (Toasts) but unfortunately for Toasting a precompiled alert version there is no dismiss-able button or option which surely would require, foolish UX flaw generally speaking.
Any luck? is it there already or when can it be expected?