PopBox For Elementor - Version 1.0.4

Version Description

  • NEW: Added controls for close button text.
  • TWEAK: Elevated PopBox's z-index when modal is open.
  • TWEAK: Refactored Button style options and moved the border controls into their own settings tab.
  • TWEAK: Button Typography moved to button content options for better arrangements
Download this release

Release Info

Developer norewp
Plugin Icon wp plugin PopBox For Elementor
Version 1.0.4
Comparing to
See all releases

Code changes from version 1.0.3 to 1.0.4

Files changed (5) hide show
  1. css/bootstrap.css +2 -2
  2. css/popup.css +4 -14
  3. modal-for-elementor.php +2 -2
  4. readme.txt +12 -6
  5. widgets/popup.php +101 -65
css/bootstrap.css CHANGED
@@ -5,6 +5,7 @@
5
  */
6
  /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
7
 
 
8
  .fade {
9
  opacity: 0;
10
  -webkit-transition: opacity .15s linear;
@@ -156,8 +157,7 @@ button.close {
156
  }
157
  .modal-footer .btn-block + .btn-block {
158
  margin-left: 0;
159
- }
160
- /*
161
  .modal-scrollbar-measure {
162
  position: absolute;
163
  top: -9999px;
5
  */
6
  /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
7
 
8
+
9
  .fade {
10
  opacity: 0;
11
  -webkit-transition: opacity .15s linear;
157
  }
158
  .modal-footer .btn-block + .btn-block {
159
  margin-left: 0;
160
+ }/*
 
161
  .modal-scrollbar-measure {
162
  position: absolute;
163
  top: -9999px;
css/popup.css CHANGED
@@ -33,21 +33,10 @@
33
  text-align: center;
34
  }
35
 
36
- body.modal-open .elementor-widget-wrap {
37
- z-index: auto;
38
  }
39
- /* This should probably be addressed by the affected themes! */
40
- /*
41
- html {
42
- -ms-overflow-style: scrollbar;
43
- overflow: hidden;
44
- height: 100%;
45
- }
46
- body {
47
- overflow: auto;
48
- height: 100%;
49
- }*/
50
- /* End affected themes comment! */
51
  .modal-popup {
52
  cursor: pointer;
53
  }
@@ -62,4 +51,5 @@ body {
62
  .modal-content button.close {
63
  position: absolute;
64
  right: 0;
 
65
  }
33
  text-align: center;
34
  }
35
 
36
+ body.modal-open .modal {
37
+ z-index: 9999;
38
  }
39
+
 
 
 
 
 
 
 
 
 
 
 
40
  .modal-popup {
41
  cursor: pointer;
42
  }
51
  .modal-content button.close {
52
  position: absolute;
53
  right: 0;
54
+ top: 0;
55
  }
modal-for-elementor.php CHANGED
@@ -2,7 +2,7 @@
2
  /**
3
  * Plugin Name: PopBox For Elementor
4
  * Description: Create content-rich popboxes for your site using the power of Elementor Page Builder
5
- * Version: 1.0.3
6
  * Author: Zulfikar Nore
7
  * Author URI: https://designsbynore.com/
8
  * Plugin URI: https://designsbynore.com/popups/popbox/
@@ -12,7 +12,7 @@
12
 
13
  if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
14
 
15
- define( 'MODAL_ELEMENTOR_VERSION', '1.0.3' );
16
 
17
  define( 'MODAL_ELEMENTOR__FILE__', __FILE__ );
18
  define( 'MODAL_ELEMENTOR_PLUGIN_BASE', plugin_basename( MODAL_ELEMENTOR__FILE__ ) );
2
  /**
3
  * Plugin Name: PopBox For Elementor
4
  * Description: Create content-rich popboxes for your site using the power of Elementor Page Builder
5
+ * Version: 1.0.4
6
  * Author: Zulfikar Nore
7
  * Author URI: https://designsbynore.com/
8
  * Plugin URI: https://designsbynore.com/popups/popbox/
12
 
13
  if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
14
 
15
+ define( 'MODAL_ELEMENTOR_VERSION', '1.0.4' );
16
 
17
  define( 'MODAL_ELEMENTOR__FILE__', __FILE__ );
18
  define( 'MODAL_ELEMENTOR_PLUGIN_BASE', plugin_basename( MODAL_ELEMENTOR__FILE__ ) );
readme.txt CHANGED
@@ -4,7 +4,7 @@ Donate link: https://www.paypal.me/NoreMarketing/5
4
  Tags: PopBox, Modal, Popup, Elementor
5
  Requires at least: 4.4
6
  Tested up to: 4.9
7
- Stable tag: 1.0.3
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
@@ -12,13 +12,13 @@ Add a modal widget for Elementor Page Builder.
12
 
13
  == Description ==
14
 
15
- NOTE: Modal For Elementor is now PopBox For Elementor and develoment will now be continued by Zulfikar Nore of NoreWP :)
16
 
17
  PopBox for Elementor allows the creation of beautiful templates with Elementor Page Builder for use with the included Popbox overlay script.
18
 
19
  An Admin menu will be added on your Wordpress Dashboard sidepane named PopBoxes. This is the custom post type (CPT) you'll use to create the content of the PopBox.
20
 
21
- A custom module will also be added to Elementor Page Builder edit screen to be used for the customiztion of the trigger button embeded on your page.
22
  Simply select one of the PopBox content created via the CPT to be shown when the trigger button is clicked.
23
 
24
  Brief video on setup (Sorry for the lack of sound): https://youtu.be/M3B9aLLTXKY
@@ -32,6 +32,12 @@ Brief video on setup (Sorry for the lack of sound): https://youtu.be/M3B9aLLTXKY
32
  Go to settings > permalinks and click save. (you need to do that in order to register the popup post types.)
33
 
34
  == Changelog ==
 
 
 
 
 
 
35
  = 1.0.3 =
36
  * FIX: Double scrollbar on sites running on Astra & OceanWP themes.
37
 
@@ -48,12 +54,12 @@ Go to settings > permalinks and click save. (you need to do that in order to reg
48
  = 1.0.0 =
49
  * FIXED: Issue when video contained in a popup did not stop playing after the closing - See topic: https://wordpress.org/support/topic/videos-in-popups/
50
  * Code tidyup
51
- * NEW: Added `modal_for_elementor_fail_load()` function to handle gracefull fallback when Elementor is not active.
52
- * NEW: Added `modal_for_elementor_fail_load_out_of_date()` function to handle gracefull fallback when Elementor version is out of date - Required version set to v1.8.5.
53
  * NEW: Background color control for modal content window.
54
  * NEW: Border and Border radius controls for modal content window.
55
  * TWEAK: Changed widget category to norewp-elements (NoreWP's Elementor Modules) for better representation and future enhancements.
56
- * TWEAK: Reorganised Controls for better workflow
57
  * TWEAK: Modal Max Width control moved to Style > Modal Container for better grouping.
58
  * TWEAK: Moved button typography to below text padding for better workflow.
59
  * TWEAK: Removed hardcoded content window box shadow and added Shadow Control for maximum control
4
  Tags: PopBox, Modal, Popup, Elementor
5
  Requires at least: 4.4
6
  Tested up to: 4.9
7
+ Stable tag: 1.0.4
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
12
 
13
  == Description ==
14
 
15
+ NOTE: Modal For Elementor is now PopBox For Elementor and development will now be continued by Zulfikar Nore of NoreWP :)
16
 
17
  PopBox for Elementor allows the creation of beautiful templates with Elementor Page Builder for use with the included Popbox overlay script.
18
 
19
  An Admin menu will be added on your Wordpress Dashboard sidepane named PopBoxes. This is the custom post type (CPT) you'll use to create the content of the PopBox.
20
 
21
+ A custom module will also be added to Elementor Page Builder edit screen to be used for the customization of the trigger button embedded on your page.
22
  Simply select one of the PopBox content created via the CPT to be shown when the trigger button is clicked.
23
 
24
  Brief video on setup (Sorry for the lack of sound): https://youtu.be/M3B9aLLTXKY
32
  Go to settings > permalinks and click save. (you need to do that in order to register the popup post types.)
33
 
34
  == Changelog ==
35
+ = 1.0.4 =
36
+ * NEW: Added controls for close button text.
37
+ * TWEAK: Elevated PopBox's z-index when modal is open.
38
+ * TWEAK: Refactored Button style options and moved the border controls into their own settings tab.
39
+ * TWEAK: Button Typography moved to button content options for better arrangements
40
+
41
  = 1.0.3 =
42
  * FIX: Double scrollbar on sites running on Astra & OceanWP themes.
43
 
54
  = 1.0.0 =
55
  * FIXED: Issue when video contained in a popup did not stop playing after the closing - See topic: https://wordpress.org/support/topic/videos-in-popups/
56
  * Code tidyup
57
+ * NEW: Added `modal_for_elementor_fail_load()` function to handle graceful fallback when Elementor is not active.
58
+ * NEW: Added `modal_for_elementor_fail_load_out_of_date()` function to handle graceful fallback when Elementor version is out of date - Required version set to v1.8.5.
59
  * NEW: Background color control for modal content window.
60
  * NEW: Border and Border radius controls for modal content window.
61
  * TWEAK: Changed widget category to norewp-elements (NoreWP's Elementor Modules) for better representation and future enhancements.
62
+ * TWEAK: Reorganized Controls for better workflow
63
  * TWEAK: Modal Max Width control moved to Style > Modal Container for better grouping.
64
  * TWEAK: Moved button typography to below text padding for better workflow.
65
  * TWEAK: Removed hardcoded content window box shadow and added Shadow Control for maximum control
widgets/popup.php CHANGED
@@ -89,7 +89,7 @@ class ElementorModal extends Widget_Base {
89
  ]
90
  );
91
  $this->add_control(
92
- 'text',
93
  [
94
  'label' => __( 'Text', 'modal-for-elementor' ),
95
  'type' => Controls_Manager::TEXT,
@@ -176,6 +176,17 @@ class ElementorModal extends Widget_Base {
176
  ],
177
  ]
178
  );
 
 
 
 
 
 
 
 
 
 
 
179
  $this->add_control(
180
  'view',
181
  [
@@ -233,7 +244,7 @@ class ElementorModal extends Widget_Base {
233
  $this->add_control(
234
  'close_size',
235
  [
236
- 'label' => __( 'Size', 'modal-for-elementor' ),
237
  'type' => Controls_Manager::SLIDER,
238
  'range' => [
239
  'px' => [
@@ -242,7 +253,7 @@ class ElementorModal extends Widget_Base {
242
  ],
243
  ],
244
  'selectors' => [
245
- '{{WRAPPER}} button.close' => 'font-size: {{SIZE}}{{UNIT}};',
246
  ],
247
  ]
248
  );
@@ -260,6 +271,26 @@ class ElementorModal extends Widget_Base {
260
  'separator' => 'before',
261
  ]
262
  );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
263
 
264
  $this->end_controls_section();
265
 
@@ -272,11 +303,64 @@ class ElementorModal extends Widget_Base {
272
  );
273
 
274
  $this->start_controls_tabs( 'tabs_button_style' );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
275
 
276
  $this->start_controls_tab(
277
  'tab_button_normal',
278
  [
279
- 'label' => __( 'Normal', 'modal-for-elementor' ),
280
  ]
281
  );
282
 
@@ -362,60 +446,6 @@ class ElementorModal extends Widget_Base {
362
 
363
  $this->end_controls_tab();
364
 
365
- $this->add_group_control(
366
- Group_Control_Border::get_type(),
367
- [
368
- 'name' => 'border',
369
- 'label' => __( 'Border', 'modal-for-elementor' ),
370
- 'placeholder' => '1px',
371
- 'default' => '1px',
372
- 'selector' => '{{WRAPPER}} .elementor-button',
373
- ]
374
- );
375
-
376
- $this->add_control(
377
- 'border_radius',
378
- [
379
- 'label' => __( 'Border Radius', 'modal-for-elementor' ),
380
- 'type' => Controls_Manager::DIMENSIONS,
381
- 'size_units' => [ 'px', '%' ],
382
- 'selectors' => [
383
- '{{WRAPPER}} a.elementor-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
384
- ],
385
- ]
386
- );
387
-
388
- $this->add_group_control(
389
- Group_Control_Box_Shadow::get_type(),
390
- [
391
- 'name' => 'button_box_shadow',
392
- 'selector' => '{{WRAPPER}} .elementor-button',
393
- ]
394
- );
395
-
396
- $this->add_control(
397
- 'text_padding',
398
- [
399
- 'label' => __( 'Text Padding', 'modal-for-elementor' ),
400
- 'type' => Controls_Manager::DIMENSIONS,
401
- 'size_units' => [ 'px', 'em', '%' ],
402
- 'selectors' => [
403
- '{{WRAPPER}} a.elementor-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
404
- ],
405
- 'separator' => 'before',
406
- ]
407
- );
408
-
409
- $this->add_group_control(
410
- Group_Control_Typography::get_type(),
411
- [
412
- 'name' => 'typography',
413
- 'label' => __( 'Typography', 'modal-for-elementor' ),
414
- 'scheme' => Scheme_Typography::TYPOGRAPHY_4,
415
- 'selector' => '{{WRAPPER}} a.elementor-button',
416
- ]
417
- );
418
-
419
  $this->end_controls_section();
420
 
421
  //Modal Container Optins Start Here
@@ -485,7 +515,7 @@ class ElementorModal extends Widget_Base {
485
  $this->add_control(
486
  'modal_window_hint',
487
  [
488
- 'label' => __( 'Select and configure the requeired popup modal window\'s background type below', 'extend-elements' ),
489
  'type' => Controls_Manager::RAW_HTML,
490
  ]
491
  );
@@ -640,13 +670,16 @@ class ElementorModal extends Widget_Base {
640
  if ( ! empty( $selectedPopup->post->ID ) ) {
641
  $this->add_render_attribute( 'button', 'data-target', '#popup-' . esc_attr($selectedPopup->post->ID) );
642
  }
 
 
 
643
  $this->add_render_attribute( 'button', 'class', 'modal-popup' );
644
  $this->add_render_attribute( 'content-wrapper', 'class', 'elementor-button-content-wrapper' );
645
  $this->add_render_attribute( 'icon-align', 'class', 'elementor-align-icon-' . $settings['icon_align'] );
646
  $this->add_render_attribute( 'icon-align', 'class', 'elementor-button-icon' );
647
  ?>
648
  <!-- PopBox:popboxRender -->
649
- <!-- Popup trigger button -->
650
  <div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?>>
651
  <a <?php echo $this->get_render_attribute_string( 'button' ); ?>>
652
  <span <?php echo $this->get_render_attribute_string( 'content-wrapper' ); ?>>
@@ -655,15 +688,18 @@ class ElementorModal extends Widget_Base {
655
  <i class="<?php echo esc_attr( $settings['icon'] ); ?>"></i>
656
  </span>
657
  <?php endif; ?>
658
- <span class="elementor-button-text"><?php echo $settings['text']; ?></span>
659
  </span>
660
  </a>
661
  </div>
662
- <!-- /Popup trigger button -->
663
- <!-- Popup -->
664
  <div class="modal fade" id="popup-<?php echo $selectedPopup->post->ID; ?>" tabindex="-1" role="dialog" aria-labelledby="popup-<?php echo $selectedPopup->post->ID; ?>-label">
665
  <div class="modal-content">
666
- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 
 
 
667
  <div class="modal-body">
668
  <?php
669
  $elementor = get_post_meta( $selectedPopup->post->ID, '_elementor_edit_mode', true );
@@ -687,7 +723,7 @@ class ElementorModal extends Widget_Base {
687
  });
688
  })(jQuery);
689
  </script>
690
- <!-- Popup -->
691
  <?php
692
  wp_reset_postdata();
693
 
89
  ]
90
  );
91
  $this->add_control(
92
+ 'button_text',
93
  [
94
  'label' => __( 'Text', 'modal-for-elementor' ),
95
  'type' => Controls_Manager::TEXT,
176
  ],
177
  ]
178
  );
179
+
180
+ $this->add_group_control(
181
+ Group_Control_Typography::get_type(),
182
+ [
183
+ 'name' => 'button_typography',
184
+ 'label' => __( 'Typography', 'modal-for-elementor' ),
185
+ 'scheme' => Scheme_Typography::TYPOGRAPHY_4,
186
+ 'selector' => '{{WRAPPER}} a.elementor-button',
187
+ ]
188
+ );
189
+
190
  $this->add_control(
191
  'view',
192
  [
244
  $this->add_control(
245
  'close_size',
246
  [
247
+ 'label' => __( 'Icon Size', 'modal-for-elementor' ),
248
  'type' => Controls_Manager::SLIDER,
249
  'range' => [
250
  'px' => [
253
  ],
254
  ],
255
  'selectors' => [
256
+ '{{WRAPPER}} button.close i' => 'font-size: {{SIZE}}{{UNIT}};',
257
  ],
258
  ]
259
  );
271
  'separator' => 'before',
272
  ]
273
  );
274
+
275
+ $this->add_control(
276
+ 'close_text',
277
+ [
278
+ 'label' => __( 'Close Text', 'modal-for-elementor' ),
279
+ 'type' => Controls_Manager::TEXT,
280
+ 'placeholder' => __( 'Close', 'modal-for-elementor' ),
281
+ 'description' => __( 'Add call to action i.e "Close" before the popup close X', 'modal-for-elementor' ),
282
+ ]
283
+ );
284
+
285
+ $this->add_group_control(
286
+ Group_Control_Typography::get_type(),
287
+ [
288
+ 'name' => 'close_typography',
289
+ 'label' => __( 'Close Typography', 'modal-for-elementor' ),
290
+ 'scheme' => Scheme_Typography::TYPOGRAPHY_4,
291
+ 'selector' => '{{WRAPPER}} button.close:not(i)',
292
+ ]
293
+ );
294
 
295
  $this->end_controls_section();
296
 
303
  );
304
 
305
  $this->start_controls_tabs( 'tabs_button_style' );
306
+
307
+ $this->start_controls_tab(
308
+ 'tab_button_settings',
309
+ [
310
+ 'label' => __( 'Settings', 'modal-for-elementor' ),
311
+ ]
312
+ );
313
+
314
+ $this->add_group_control(
315
+ Group_Control_Border::get_type(),
316
+ [
317
+ 'name' => 'border',
318
+ 'label' => __( 'Border', 'modal-for-elementor' ),
319
+ 'placeholder' => '1px',
320
+ 'default' => '1px',
321
+ 'selector' => '{{WRAPPER}} .elementor-button',
322
+ ]
323
+ );
324
+
325
+ $this->add_control(
326
+ 'border_radius',
327
+ [
328
+ 'label' => __( 'Border Radius', 'modal-for-elementor' ),
329
+ 'type' => Controls_Manager::DIMENSIONS,
330
+ 'size_units' => [ 'px', '%' ],
331
+ 'selectors' => [
332
+ '{{WRAPPER}} a.elementor-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
333
+ ],
334
+ ]
335
+ );
336
+
337
+ $this->add_group_control(
338
+ Group_Control_Box_Shadow::get_type(),
339
+ [
340
+ 'name' => 'button_box_shadow',
341
+ 'selector' => '{{WRAPPER}} .elementor-button',
342
+ ]
343
+ );
344
+
345
+ $this->add_control(
346
+ 'button_padding',
347
+ [
348
+ 'label' => __( 'Text Padding', 'modal-for-elementor' ),
349
+ 'type' => Controls_Manager::DIMENSIONS,
350
+ 'size_units' => [ 'px', 'em', '%' ],
351
+ 'selectors' => [
352
+ '{{WRAPPER}} a.elementor-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
353
+ ],
354
+ 'separator' => 'before',
355
+ ]
356
+ );
357
+
358
+ $this->end_controls_tab();
359
 
360
  $this->start_controls_tab(
361
  'tab_button_normal',
362
  [
363
+ 'label' => __( 'Colors', 'modal-for-elementor' ),
364
  ]
365
  );
366
 
446
 
447
  $this->end_controls_tab();
448
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
449
  $this->end_controls_section();
450
 
451
  //Modal Container Optins Start Here
515
  $this->add_control(
516
  'modal_window_hint',
517
  [
518
+ 'label' => __( 'Select and configure the required popup modal window\'s background type below', 'extend-elements' ),
519
  'type' => Controls_Manager::RAW_HTML,
520
  ]
521
  );
670
  if ( ! empty( $selectedPopup->post->ID ) ) {
671
  $this->add_render_attribute( 'button', 'data-target', '#popup-' . esc_attr($selectedPopup->post->ID) );
672
  }
673
+ if ( ! empty( $settings['close_text'] ) ) {
674
+ $close = $settings['close_text'];
675
+ }
676
  $this->add_render_attribute( 'button', 'class', 'modal-popup' );
677
  $this->add_render_attribute( 'content-wrapper', 'class', 'elementor-button-content-wrapper' );
678
  $this->add_render_attribute( 'icon-align', 'class', 'elementor-align-icon-' . $settings['icon_align'] );
679
  $this->add_render_attribute( 'icon-align', 'class', 'elementor-button-icon' );
680
  ?>
681
  <!-- PopBox:popboxRender -->
682
+ <!-- PopBox trigger button -->
683
  <div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?>>
684
  <a <?php echo $this->get_render_attribute_string( 'button' ); ?>>
685
  <span <?php echo $this->get_render_attribute_string( 'content-wrapper' ); ?>>
688
  <i class="<?php echo esc_attr( $settings['icon'] ); ?>"></i>
689
  </span>
690
  <?php endif; ?>
691
+ <span class="elementor-button-text"><?php echo $settings['button_text']; ?></span>
692
  </span>
693
  </a>
694
  </div>
695
+ <!-- /PopBox trigger button -->
696
+ <!-- PopBox -->
697
  <div class="modal fade" id="popup-<?php echo $selectedPopup->post->ID; ?>" tabindex="-1" role="dialog" aria-labelledby="popup-<?php echo $selectedPopup->post->ID; ?>-label">
698
  <div class="modal-content">
699
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
700
+ <span aria-hidden="true">
701
+ <?php echo $close; ?> <i class="fa fa-close"></i></span>
702
+ </button>
703
  <div class="modal-body">
704
  <?php
705
  $elementor = get_post_meta( $selectedPopup->post->ID, '_elementor_edit_mode', true );
723
  });
724
  })(jQuery);
725
  </script>
726
+ <!-- PopBox -->
727
  <?php
728
  wp_reset_postdata();
729