How to add a class to the corresponding popup By Admin

I have got two div's


Each div has got a button class named addonsBtn , when clicked on that it will open a popup and append data to the corresponding popup

If clicked on First Addon , is it possible to add class by name 'foroneclass' so that it looks this way


If clicked on Second Addon , is it possible to add class by name 'fortwolass' so that it looks this way

This is my fiddle

  •  Open
  •  27-07-2016
  •  5
  •  260

Answers ( 5 )

 Posted on 27-07-2016

Sure. There are a few ways to skin a cat


Basic solution

Based on your fiddle, you can extend the following two lines:

Line 8 is:

$("#addonsWrap789").popup({history: false}).popup('open').enhanceWithin(); 

$("#addonsWrap789").popup({history: false}).popup('open').enhanceWithin().addClass("foroneclassfo");
And line 15:

$("#addonsWrap790").popup({history: false}).popup('open').enhanceWithin();

$("#addonsWrap790").popup({history: false}).popup('open').enhanceWithin().addClass("foretwoclassfo");


Cleaner solution

I've cleaned up your jsfiddle file a bit. We can approach it in a bit more of a reusable way by taking the toppname and appending your desired class suffix onto the end. This way, you could have 2 or 10 modals and it would continue to work as intended.

 Posted on 27-07-2016

$(document).on('click', '.addonsBtn', function(e) {
  var toppname = $(this).data('toppname');
  var id = $(this).attr('id');
  var html = '


  $("#" + id ).html(html).trigger('create').trigger('pagecreate');
  $("#" + id ).trigger('create').trigger('pagecreate');
  $("#" + id ).popup({
    history: false


 Posted on 27-07-2016

$(document).on('click', '.addonsBtn', function(e) {
 var $toppName = $(this).data('toppname'),
     $topClass = $(this).data('topclass'),
     $popup = $("#" + $(this).data("popup")),
     $popupContent = '


    history: false

// addClass method will keep the class even when the popup is hidden

 Posted on 27-07-2016

Here i'd suggest a simpler way of doing this. Lets say that you put the desire class name in a attribute of both of your div's.
div id="one" key="foroneclass" and div id="two" key="fortwolass" 

Now when user will click what you can do is pick the value of attribute key.
var current_clasname = $(this).attr("key");

and then place it it the class name of your popup.
$(".pop_up").removeAttr("class"); // To make sure that previous class is removed!!

 Posted on 27-07-2016

$(document).on('click', '.addonsBtn', function(e) {
    var toppname = $(this).data('toppname');
    var html = '

    if (toppname === 'forone') {
            history: false