jQuery UI Widgets › Forums › Dialogs and Notifications › Tooltip, Notification, Popover › button within notification
This topic contains 5 replies, has 3 voices, and was last updated by Todor 5 years, 3 months ago.
-
Author
-
Good evening, is it possible to apply transparency to a button within a notification?
A greeting.<!DOCTYPE html>
<html>
<head>
<title>jQuery Notification Sample</title>
<link type=”text/css” rel=”Stylesheet” href=”../../jqwidgets/styles/jqx.base.css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxnotification.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script><script type=”text/javascript”>
$(document).ready(function () {
$(“#jqxNotification”).jqxNotification({
width: 300,
height: 100,
position: “top-left”,
opacity: 0.9,
autoOpen: true,
autoClose: false,
template: “info”,
closeOnClick: false,
});$(‘#jqxButton’).jqxButton({
height: ’30px’,
});});
</script><style>
#jqxButton{background-color: transparent;}
</style></head>
<body>
<div id=”jqxNotification”>Welcome to our website!
<div><input type=”button” value=”Click me” id=’jqxButton’ /></div>
</div>
</body>
</html>Hello pepe,
Yes, it is possible.
And your code is working fine. Please, look at the following Example.Best Regards,
MartinjQWidgets Team
http://www.jqwidgets.com/Thank you very much for the answers Martin. I have tried the button code and the notification separately and they work perfectly as I want, but when I put the button inside the div of the notification its appearance is 3d. Keep looking.
A greeting.
Hello pepe,
We have tested this case and the button is still transparent. Could you provide an example(jsfiddle/codepen) then we would be able to properly investigate this?
Best Regards,
TodorjQWidgets Team
https://www.jqwidgets.comGood night, I try to capture the click event of the button but I can not get it.
A greeting.<!DOCTYPE html>
<html>
<head>
<title>jQuery Notification Sample</title>
<link type=”text/css” rel=”Stylesheet” href=”../../jqwidgets/styles/jqx.base.css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxnotification.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script><script type=’text/javascript’>
$(document).ready(function () {
$(‘#jqxNotification’).jqxNotification({
width: 300,
height: 100,
position: ‘top-left’,
opacity: 0.9,
autoOpen: true,
autoClose: false,
template: ‘info’,
closeOnClick: false,
});$(‘#jqxButton’).jqxButton({
height: ’30px’,
});$(“#jqxButton”).on(‘click’, function () {
alert(‘ok’);
});});
</script><style>
#jqxButton{background-color: transparent;}
</style></head>
<body>
<div id=’jqxNotification’>Welcome to our website!
<div><input type=’button’ value=’Click me’ id=’jqxButton’ /></div>
</div>
</body>
</html>Hello pepe,
jqxNotification is not suitable to be using with buttons in it, because you cannot get the click event. You could try to use jqxPopover instead.
Let us know if you need further assistance.
Best Regards,
TodorjQWidgets Team
https://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.