modify CSS style once the modal has been hidden

Is there a way to change the default background color of my table row back to normal after closing the modal window that appears when I click on it?

<tr class='revisions'>
      <td>{{ $revision->date_of_revision->format('d.m.Y') }}
      </td>

<td class="text-right">
                    <a  
                       data-toggle="modal" 
                       data-target="#revisionEdit" 
                       class='btn btn-warning revisionEdit'>
                        <span class="glyphicon glyphicon-pencil"></span>
                    </a>

</td>
</tr>
jquerycsslaravel-5bootstrap-modallaravel-blade

Answer №1

If you want to dynamically change the color using JavaScript, you can utilize Bootstrap modal events to revert it back once the modal is hidden.

    $('.modal').on('hidden.bs.modal', function (e) {
        $("selector").css("background-color", "#EEEEEE");
    });

As stated on w3fools:

show.bs.modal Triggers right before the modal is displayed.
shown.bs.modal Happens after the modal is completely shown (once CSS transitions are done).
hide.bs.modal Executes when the modal is about to be hidden.
hidden.bs.modal Takes place when the modal is fully hidden (after CSS transitions have finished).

Answer №2

To trigger an event when closing a modal popup, you can use the following code: Check this answer

$('#myModal').on('hidden.bs.modal', function () { // Add your desired actions here })

For more information, visit getbootstrap.com/javascript/#modals-events

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the World of Jquery and Ajax Cookies: Part 2

In continuation of my previous inquiry (refer to Previous question), I am facing difficulty in triggering the ajax call upon detecting a cookie. Despite confirming that the cookie is set and seeing the alert message, I am unable to execute the ajax call ag ...

jqueryajax

The img-wrapper is failing to show the PNG image

I'm having an issue with my code where it displays jpg images but not png. How can I make the img-wrapper show png files as well? In my example, the first image in the array is a jpg while the second is a png. However, I only see the title of the imag ...

javascripthtmljquery

How to Build a Chatbox using AJAX, HTML, and C#?

Currently, I am incorporating the Nancy Web Framework into my C# Console Application to develop a user-friendly Web Administration panel for my software. In this project, I have chosen to utilize the Spark View Engine due to its simplicity in handling HTML ...

c#jqueryhtmlajaxchatroom

Having issues with the background-image style not displaying correctly in the header of an

Trying to update the "background-image:" of a CSS class upon button click. JQuery: $(function() { $('button').on('click', function() { $('.masthead2').css('background-image', 'url("../img/whitehead ...

javascriptjqueryhtmlcss

The contrast between FormData and jQuery's serialize() method: Exploring the distinctions

Recently I came across a situation where I needed to submit a form using AJAX. While researching the most efficient method, I discovered two popular approaches - some developers were utilizing jQuery#serialize() while others were opting for FormData. Here ...

javascriptjqueryajaxform-data

Is your data coming in as NaN?

I am currently developing a basic webpage that has the capability to calculate your stake and determine your return, reminiscent of a traditional betting shop. As of now, I have successfully hard coded the odds into my page. However, while testing my code ...

javascriptjqueryhtmljson

Charting Add-Ons for jQuery

Looking for suggestions on user-friendly graph drawing plugins compatible with jQuery. Currently developing a web application that will retrieve data from a remote database and present it through visual graphs... Explored jgcharts (the jQuery Google Chart ...

phpjavascriptjqueryhtmlgoogle-visualization

Version 2: "In case of an empty input field, the submit button should be

After experimenting with two different codes on my websites, I encountered an issue. The first code looked like this: $(document).ready(function(){ $('.sendButton').attr('disabled', true); $('#message').keyup(function ...

javascriptjqueryformsbutton

How do I use CSS to organize data by row and column within a table?

I'm looking to format the table data in a column-row layout for mobile devices. Can anyone provide an example or guidance on how to achieve this? I've browsed through some discussions but haven't found a solution that works with tables. The ...

htmlcss

In Javascript, the color can be changed by clicking on an object, and the color

Looking for help with my current HTML code: <li><a href="index.php" id="1" onclick="document.getElementById('1').style.background = '#8B4513';">Weblog</a></li> The color changes while clicking, but when the lin ...

javascriptcsscolorsbackground-color

JQuery does not have the ability to compare the current date and

I've encountered an issue while comparing two date scripts that resulted in incorrect output. Here is the code that I used: var current = new Date(); var date = new Date($(this).val()); alert(current) == "Sat Aug 23 2014 14:42:00 GMT+0700 (ICT)" aler ...

javascriptjqueryjquery-uidatetimepicker

Circular arrangement using D3 Circle Pack Layout in a horizontal orientation

I'm currently experimenting with creating a wordcloud using the D3 pack layout in a horizontal format. Instead of restricting the width, I am limiting the height for my layout. The pack layout automatically arranges the circles with the largest one ...

javascriptcssd3.jschartsbubble-chart

"Transmitting an ajax POST call and receiving a corresponding GET response

Currently, I am utilizing the following AJAX code: $.ajax({ url: "Editor.aspx/Page_LoadComplete", data: { "contentCheckCode": contents }, type: "POST", success: function (response) { alert("Contents saved..."); }, error: fu ...

c#javascriptjqueryasp.netajax

Preventing mouse clicks on checkboxes and triggering events using JavaScript - a complete guide

We have a Table grid with multiple columns, one of which is a Select Box (CheckBox). The expected behavior is that when a row is clicked, the respective CheckBox should get checked, and clicking on the CheckBox itself should update it. I tried implementin ...

javascriptjquerycss

What is causing the image to move to the following line?

(https://i.stack.imgur.com/5oi7s.png) The image appears to be shifting to the next line inexplicably. I have experimented with various methods to address this issue, including utilizing the built-in Image component which seemed to show improvement. However ...

cssreactjsimagenext.js

What is the best way to style the currently selected option element in a select dropdown?

I am trying to change the font color of specific option elements within a select dropdown by adding style="color: #D4D4D4". When I apply this style directly to an option element like <option value="TEST" style="color: #D4D4D4">TEST</option>, it ...

javascriptjqueryhtmlcss

Managing text size in HTML email designs

How can I maintain consistent font sizes in HTML EMAILS? The fonts look great on the website, but in my email they appear small and close together. Check out Live Demo I've attached a screenshot of how the email appears to me. Any suggestions on h ...

csshtml-emailfont-size

Ugly consequences arise as Gulp stumbles upon uncharted territory during the uglify

I'm experiencing an issue with my squish-jquery task. Every time I run it, I encounter the following error: Starting 'squish-jquery'... events.js:85 throw er; // Unhandled 'error' event ^ Error at new JS_Par ...

javascriptjqueryangularjsgulpbuild-process

What is it about the phone screen that makes media content so captivating?

My phone has a resolution of 2280x1080. I noticed that when using the following code, the background color changes to blue on my phone: @media (max-width: 500px) { body { background-color: blue; } } Interestingly, this feature stops working once "compute ...

htmlcssmedia-queries

Eliminating unnecessary white space while utilizing the first-letter CSS property

Is there a way to remove the extra whitespace added under the first line when making the first letter of a paragraph bigger than the rest of the text? I already tried adjusting padding and margins on p::first-line without success. p{ line-height: 1.4; } p ...

htmlcss