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

The dropdown menu in the navigation bar is not properly lined up with its corresponding menu item

I've been struggling to align my submenu with the navbar, and I suspect there is an issue with the CSS that I can't seem to figure out. CodePEN: https://codepen.io/wowasdi/pen/xxKzdQq Even after trying to adjust the navbar CSS settings by changi ...

htmlcssnavbar

The implementation of a custom event for jQuery rows is not functioning as expected

I need assistance with jQuery code to add click events only to columns in a row that have text in the first column. Specifically, I want to hide rows containing "1/" in the first column when clicked on for the first row. <table class="results"> < ...

javascriptjquery

Displaying postcode on a category page: A step-by-step guide

I would like to showcase the user input code and present it on the web exactly as entered. <?php #code... ?> Any assistance is greatly appreciated. Please excuse my English. Thank you! ...

javascriptphphtmlcss

saving a JSON element in a JavaScript array

Currently, I am utilizing AJAX to fetch data from a database using PHP and then converting it into JSON format. <?php echo json_encode($data); ?> This is the AJAX function being used: ajaxCall("getdata.php", container, function (data) { var co ...

javascriptphpjqueryjsonajax

Submitting Multi-part forms using JQuery/Ajax and Spring Rest API

Recently, I started exploring JQuery and decided to experiment with asynchronous multipart form uploading. The form includes various data fields along with a file type. On the server side (using Spring), I have set up the code as follows: @RequestMapping ...

javascriptjqueryajaxspringrest

When dynamically adding input fields in Bootstrap, there is a smaller gap between inline inputs

When adding a new list item dynamically in a modal using jQuery append, the spacing in the first li element seems to have a larger gap between the input fields compared to the rest that are added later. Even after checking the developer tools and confirmin ...

javascripthtmlcsstwitter-bootstrapbackbone.js

Positioning a centered div with absolute positioning may result in offset issues on Android devices when the content exceeds the viewport size

Encountering a peculiar issue on Android browsers, particularly when the following elements are present on a page: A div element larger than the device's viewport size. (In this case, set at 1200px.) One or more other div elements styled for centeri ...

androidhtmlcssmobile

A guide to replacing or customizing standard components in ReactJS

I need to modify the color property of a common component so I can use it elsewhere. const ViewAllIcon = (props) => ( <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 26 ...

javascriptcssreactjsnext.js

Using HTML Select field to make ajax calls to web services

When working with modals that contain forms to create objects for database storage, there is a Select field included. This is the code snippet for the Select field: <div class="form-group" id=existingUser> <label>Username</label> < ...

javascriptjqueryhtmlajaxmodel-view-controller

In order to maintain a custom tooltip in an open state until it is hovered over, while also controlling its

When hovering over the first column of the table, a tooltip will appear. Within each material tooltip, I would like to include a button at the bottom right after the JSON data. When this button is clicked, it should open an Angular Material dialog. <ng ...

javascripthtmlcssangular

Issue with Rickshaw graph not updating in real-time

Here is my code for generating a graph: var allVenues = []; var seriesData = []; var callGraph = function () { var where = jQuery('#hdnVal').val(); jQuery.ajax({ url: "PopulateTable", type: 'GET', ...

jqueryajaxgraphrickshaw

Traversing a series of HTML form elements in order to extract their current values and store them in an object

Suppose we have an HTML structure like this: <nav data-filters class=""> <input type="radio" name="type" value="company" checked>Company <input type="radio" name="type" value="product">Product <input type=" ...

javascriptjqueryhtmlbackbone.jsunderscore.js

What is the significance of the "#" character in the URL of a jQuery mobile

As I encounter a strange issue with my jQuery mobile page, I notice that when accessing page.php everything looks good, but once adding #someDetailsHere to the URL, it only displays a blank white page. What could be causing this and how can I resolve it? ...

javascriptjquerymobile

PHP and MySQL with jQuery and AJAX combine to create a real-time news feed update system similar to Twitter

Is there a way to automate the news feed on my website so that it periodically checks for new status updates? I would like it to display a button labeled "(?) New Messages" when there are new updates, and then load only the new ones when the button is clic ...

phpjavascriptjquerymysqlajax

Styling elements with CSS

I've been attempting to align a button to the right of another button. The example above illustrates what I'm trying to achieve. I used Bootstrap to build it, which has a useful navbar feature for layout. However, despite my efforts to use right ...

javascripthtmlcss

Refusing to be removed through an AJAX live request

Every time I try to delete the content by clicking on the delete button, it just doesn't work for me. I suspect there might be an issue with the ajax delete call. ajax-file.php $('.delete_update').on("click",function() { var I ...

phpjqueryajax

Creating a Javascript function to perform a specific action based on the selected

I am facing some challenges with my webshop project and I would appreciate any help. The main issue I'm dealing with is setting up a select box that allows customers to choose different colors of a product. When a color is selected from the dropdown, ...

jqueryimageselect

Employing jQuery to save the href value as a fresh variable

There is an anchor tag with id 'item-1' that needs to be stored in a new variable called 'href'. The tag looks like this: <a id='item-1' href='#something'> To achieve this using jQuery, what approach should be ...

jqueryhtmlfrontend

What could be the reason that the div is not being centered in the middle of the body?

<style> .maincont { width: 8em; height: 8em; background: purple; } body { background: limegreen; display: flex; flex-direction: column; place-content: center; place-items: center; } </style> <body> ...

htmlcsscenter

The functionality of event binding is unable to function properly on elements that are created dynamically

I am currently developing a shopping cart feature where I store product information in session variables. I have implemented an AJAX functionality to add products to the cart dynamically on the HTML page, which works fine. However, I am facing issues whe ...

jquerydynamicbindelement