protected void btnSaveFruits_Click(object sender, EventArgs e)
{ // Code to save data into database
}
I would like to highlight blue color for all buttons when I click on them to popup the modals. I have a trouble to keep color not change when perform data saving using ASP.NET button during post back.
Any solution in JavaScript or jquery code to solve my problem? Thanks in advance.
Thank you for your answer but your code is not produced the result which I expected. For example, initial page is loaded two buttons in gray color. If you click on button 1 to open popup modal, then click on save or close button inside
My scenario, the initial page is loaded two buttons in gray color. If the user clicks on button one to open popup modal to perform some actions, then click on server side SAVE button and hide the popup modal and button one change GRAY color Gray to Blue.
This BLUE color is staying permanently if the user does the same procedures on button two and so on.
My scenario, the initial page is loaded two buttons in gray color. If the user clicks on button one to open popup modal to perform some actions, then click on server side SAVE button and hide the popup modal and button one change GRAY color Gray to Blue. This
BLUE color is staying permanently if the user does the same procedures on button two and so on.
You can set the buttons in gray color using CSS. Then bind javascript function to the SAVE button's onclick event. In the javascript code you can change button one's color from GRAY to BLUE.
The following link shows how to change the style using JavaScript, please take it as reference.
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
I knew how to use CSS for change the color button. Your link did not address my issues.
My current issue is using asp.net button for saving data into database, then the entire page is post back and only one button is BLUE highlight and the other is back to GRAY color.
I would like to highlight more than one button to show BLUE color whenever they select.
In my case, I am not sure to capture the event to know which button is selected, then next steps is doing CSS to change the color. I searched some other resource, then I had to use HTML button instead of ASP.NET button and web method but I got another issue
how to close the bootstrap modal from web method code behind.
Even though I use the client code but still have an issue for closing bootstrap modal and found the solution when search for closing bootstrap modal on form submit.
Member
169 Points
414 Posts
Change color of the buttons to popup bootstrap modal when click on them
Jan 25, 2017 09:27 AM|avt2k7|LINK
Hi all,
I have an ASP.NET web form with UI buttons to popup bootstrap modals as following:
<div class="row"> <div class="col-lg-3 col-md-3 col-sm-3"> </div> <div class="col-lg-2 col-md-2 col-sm-2 "> <button id="btn1" type="button" class="btn btn-danger btn-lg gray-background white custom" data-toggle="modal" data-target="#editFruitsModal"> Fruits </button> </div> <div class="col-lg-2 col-md-2 col-sm-2 "> <button id="btn2" type="button" class="btn btn-danger btn-lg gray-background white custom" data-toggle="modal" data-target="#editFoodsModal">Foods</button> </div> <div class="col-lg-2 col-md-2 col-sm-2 "> <button id="btn3" type="button" class="btn btn-danger btn-lg gray-background white custom" data-toggle="modal" data-target="#editDrinksModal">Drinks</button> </div> <div class="col-lg-3 col-md-3 col-sm-3"> </div> </div><div class="modal fade" id="editFruitsModal" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true" class="glyphicon glyphicon-remove-sign"></span> </button> <h4 class="modal-title" id="myModalLabel">Fruits</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-md-12"> <div class="form-vertical" role="form"> <div class="form-group form-group-sm"> <div class="col-md-3" style="text-align: center;"> <label class="btn btn-default btn-lg" style="width: 180px; padding: 5px; text-decoration: underline; font-weight: bold; font-style: normal; font-variant: small-caps; color: black; background-color: white"> Apple </label> <input type="checkbox" runat="server" id="cbApple" data-toggle="toggle" data-width="80" data-height="60" data-on="YES" data-off="NO"> </div> </div> </div> <div class="form-vertical" role="form"> <div class="form-group form-group-sm"> <div class="col-md-3" style="text-align: center;"> <label class="btn btn-default btn-lg" style="width: 180px; padding: 5px; text-decoration: underline; font-weight: bold; font-style: normal; font-variant: small-caps; color: black; background-color: white"> Kiwi </label> <input type="checkbox" runat="server" id="cbKiwi" data-toggle="toggle" data-width="80" data-height="60" data-on="YES" data-off="NO"> </div> </div> </div> <div class="form-vertical" role="form"> <div class="form-group form-group-sm"> <div class="col-md-3" style="text-align: center;"> <label class="btn btn-default btn-lg" style="width: 180px; padding: 5px; text-decoration: underline; font-weight: bold; font-style: normal; font-variant: small-caps; color: black; background-color: white"> Pear </label> <input type="checkbox" runat="server" id="cbPear" data-toggle="toggle" data-width="80" data-height="60" data-on="YES" data-off="NO"> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <asp:Button runat="server" ID="btnSaveFruits" CssClass="btn btn-primary" Text="Save" OnClick="btnSaveFruits_Click" OnClientClick="closeModal();" CausesValidation="false" /> </div> </div> </div> </div>and CSS
<style type="text/css"> .gray-background { background-color: gray; } .blue-background { background-color: blue; } .white { color: #ffffff; } .custom { height: 80px !important; width: 180px !important; } </style>protected void btnSaveFruits_Click(object sender, EventArgs e) {// Code to save data into database }
I would like to highlight blue color for all buttons when I click on them to popup the modals. I have a trouble to keep color not change when perform data saving using ASP.NET button during post back.
Any solution in JavaScript or jquery code to solve my problem? Thanks in advance.
Member
20 Points
31 Posts
Re: Change color of the buttons to popup bootstrap modal when click on them
Jan 25, 2017 10:30 AM|ifour.nishith@gmail.com|LINK
Hi,
You can use the below code pen URL
Thanks
Software developer
custom software development company India
Member
169 Points
414 Posts
Re: Change color of the buttons to popup bootstrap modal when click on them
Jan 25, 2017 03:13 PM|avt2k7|LINK
Hello,
Thank you for your answer but your code is not produced the result which I expected. For example, initial page is loaded two buttons in gray color. If you click on button 1 to open popup modal, then click on save or close button inside
My scenario, the initial page is loaded two buttons in gray color. If the user clicks on button one to open popup modal to perform some actions, then click on server side SAVE button and hide the popup modal and button one change GRAY color Gray to Blue. This BLUE color is staying permanently if the user does the same procedures on button two and so on.
Any further solution? Thanks.
Contributor
6450 Points
2525 Posts
Re: Change color of the buttons to popup bootstrap modal when click on them
Feb 08, 2017 01:33 AM|Jean Sun|LINK
Hi avt2k7,
You can set the buttons in gray color using CSS. Then bind javascript function to the SAVE button's onclick event. In the javascript code you can change button one's color from GRAY to BLUE.
The following link shows how to change the style using JavaScript, please take it as reference.
http://www.w3schools.com/js/js_htmldom_css.asp
Best Regards,
Jean
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
169 Points
414 Posts
Re: Change color of the buttons to popup bootstrap modal when click on them
Feb 09, 2017 02:49 AM|avt2k7|LINK
I knew how to use CSS for change the color button. Your link did not address my issues.
My current issue is using asp.net button for saving data into database, then the entire page is post back and only one button is BLUE highlight and the other is back to GRAY color.
I would like to highlight more than one button to show BLUE color whenever they select.
In my case, I am not sure to capture the event to know which button is selected, then next steps is doing CSS to change the color. I searched some other resource, then I had to use HTML button instead of ASP.NET button and web method but I got another issue how to close the bootstrap modal from web method code behind.
Even though I use the client code but still have an issue for closing bootstrap modal and found the solution when search for closing bootstrap modal on form submit.
Thanks.