Allow only the modals that do not have a particular parent class to be dragged

Question

Allow only the modals that do not have a particular parent class to be dragged

I am currently working on making all the modals draggable on my website. However, there are certain modals with a class of .fullscreen that I do not want to be draggable.

The issue I'm facing is that I can't figure out how to exclude the modals with the .fullscreen class because they share the same parent element .modal-dialog.

Despite trying various selectors, I have been unsuccessful in achieving this.

const $modal = $('.modal');
$(".modal-dialog:not(.modal.fullscreen)", $modal).draggable({
     handle: '.modal-header'
}); 

<div id="employee-modal" class="modal fullscreen dark advanced-search show">
        <div class="modal-dialog">
            <div class="modal-content">
                ....
            </div>
        </div>
    </div>

jquery css bootstrap-4

Answer 1

Answer №1

Have you considered this approach:

const $modal = $('.modal:not(.fullscreen)');
$(".modal-dialog", $modal).draggable({
     handle: '.modal-header'
});

If the code above accurately depicts your intentions, it simply adjusts the selector to exclude fullscreen modals. If you plan to use $modal later on, you could revise it as follows:

const $modal = $('.modal');
$(".modal-dialog", $modal.filter(':not(.fullscreen)')).draggable({
     handle: '.modal-header'
});

The concept remains the same – excluding fullscreen modals from the context. However, for improved readability, consider storing non-fullscreen modals in a separate constant like

const nonFullScreenModals = $modal.filter(':not(.fullscreen)');

Answer 2

Have you considered this approach:

const $modal = $('.modal:not(.fullscreen)');
$(".modal-dialog", $modal).draggable({
     handle: '.modal-header'
});

If the code above accurately depicts your intentions, it simply adjusts the selector to exclude fullscreen modals. If you plan to use $modal later on, you could revise it as follows:

const $modal = $('.modal');
$(".modal-dialog", $modal.filter(':not(.fullscreen)')).draggable({
     handle: '.modal-header'
});

The concept remains the same – excluding fullscreen modals from the context. However, for improved readability, consider storing non-fullscreen modals in a separate constant like

const nonFullScreenModals = $modal.filter(':not(.fullscreen)');

Allow only the modals that do not have a particular parent class to be dragged

Answer №1

Similar questions

Entering a new row and sending information through ajax

Optimizing Safari for the Best Screen Size Experience

Extracting auto-populate suggestions from MySQL database

Is it possible to save jQuery plugin initialization settings for future use?

Troubleshooting the jQuery .load() issue across various versions of Internet Explorer

Create a custom implementation of Bootstrap's Typeahead feature using Angular, CSS, and HTML without relying on any pre-existing libraries

The next promise in a promise chain does not wait for the previous promise to resolve

Retrieving data with JQuery when encountering an XHR error

jQuery Does Not Iterate Through Arrays

Arrangement of Div Box

Expanding a centered div beyond 100% width will cause the div to only enlarge towards the right side

Developing a website with all features and functionality using only traditional coding techniques

Having trouble with sending a form post and ajax post at the same time?

Retrieve Data from HTML Table using jQuery

Content descriptor with numerous lines

What is the best way to ensure Bootstrap columns adapt to different screen sizes on all devices?

Show information in a div when clicked using a data attribute that contains a secondary div with the same data attribute

Determine the aspect ratio of the image and incorporate it into the query string

What's the best way to arrange a series of images in a horizontal line using html and css?

Is it feasible to retrieve information within a behavior in Drupal?