How to add a class to the corresponding popup By Admin

I have got two div's


and

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



Similarly

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



This is my fiddle http://jsfiddle.net/cod7ceho/109/


  •  Open
  •  27-07-2016
  •  5
  •  129

Answers ( 5 )

 Posted on 27-07-2016


accepted
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(); 
Becomes:

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

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

$("#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
  }).popup('open').enhanceWithin().addClass(toppname);

});

 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 = '

';

  $($popup).html($popupContent).trigger('create').trigger('pagecreate');
  $($popup).trigger('create').trigger('pagecreate');
  $($popup).popup({
    history: false
  }).popup('open').enhanceWithin().addClass($topClass);

// 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!!
$(".pop_up").adddClass(current_clasname);

 Posted on 27-07-2016

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

';
    if (toppname === 'forone') {
        $("#addonsWrap789").addClass($(this).attr('data-toppname')+'class');
        $("#addonsWrap789").html(html).trigger('create').trigger('pagecreate');
        $("#addonsWrap789").trigger('create').trigger('pagecreate');
        $("#addonsWrap789").popup({
            history: false
        }).popup('open').enhanceWithin();
    }