{"id":22343,"date":"2018-06-22T16:32:12","date_gmt":"2018-06-22T11:02:12","guid":{"rendered":"http:\/\/convertplug.com\/plus\/?post_type=docs&#038;p=22343"},"modified":"2018-06-22T16:32:12","modified_gmt":"2018-06-22T11:02:12","slug":"how-to-open-module-on-custom-trigger-using-javascript-manually","status":"publish","type":"docs","link":"https:\/\/convertplug.com\/plus\/docs\/how-to-open-module-on-custom-trigger-using-javascript-manually\/","title":{"rendered":"How to Open Module on custom Trigger using JavaScript manually"},"content":{"rendered":"<p>You can write custom JS to open a modal manually. Use the following code by replacing <strong>style_id<\/strong> with the specific ID that you get for the style (module) you wish to display.<\/p>\n<p>You may get <strong>style_id<\/strong> by going to <strong>Design -&gt; Advance Design Options<\/strong>\u00a0 &#8211; (Scroll down until you find the style ID as shown in the screenshot below.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-22418\" src=\"http:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2018\/06\/Style-ID-seen-in-Convert-Plus.jpg\" alt=\"Style ID Seen In Convert Plus\" width=\"2048\" height=\"1196\" title=\"How to Open Module on custom Trigger using JavaScript manually\" srcset=\"https:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2018\/06\/Style-ID-seen-in-Convert-Plus.jpg 2048w, https:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2018\/06\/Style-ID-seen-in-Convert-Plus-300x175.jpg 300w, https:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2018\/06\/Style-ID-seen-in-Convert-Plus-768x449.jpg 768w, https:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2018\/06\/Style-ID-seen-in-Convert-Plus-1024x598.jpg 1024w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/>This is the code you need to add<\/p>\n<pre>var style_id = 'xxyxy'\r\n var modal_id = jQuery(\".cp-\"+style_id).data(\"class-id\");\r\n var modal = jQuery(\".\"+modal_id);\r\n modal.addClass('cp-open');\r\n jQuery(window).trigger('modalOpen',[modal]);\r\n<\/pre>\n<p><strong>Note:<\/strong> Replace the style ID as instructed above. Here is an image\u00a0that points out the position where you need to place the style ID<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-22419\" src=\"http:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2018\/06\/Add-Convert-Plus-style-ID-in-JavaScript-code.png\" alt=\"Add Convert Plus Style ID In JavaScript Code\" width=\"1366\" height=\"686\" title=\"How to Open Module on custom Trigger using JavaScript manually\" srcset=\"https:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2018\/06\/Add-Convert-Plus-style-ID-in-JavaScript-code.png 1366w, https:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2018\/06\/Add-Convert-Plus-style-ID-in-JavaScript-code-300x151.png 300w, https:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2018\/06\/Add-Convert-Plus-style-ID-in-JavaScript-code-768x386.png 768w, https:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2018\/06\/Add-Convert-Plus-style-ID-in-JavaScript-code-1024x514.png 1024w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can write custom JS to open a modal manually. Use the following code by replacing style_id with the specific ID that you get for the style (module) you wish to display. You may get style_id by going to Design -&gt; Advance Design Options\u00a0 &#8211; (Scroll down until you find the style ID as shown [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"docs_category":[18,20],"docs_tag":[],"class_list":["post-22343","docs","type-docs","status-publish","hentry","docs_category-ckeditor","docs_category-general"],"_links":{"self":[{"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/docs\/22343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/users\/12"}],"version-history":[{"count":1,"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/docs\/22343\/revisions"}],"predecessor-version":[{"id":22420,"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/docs\/22343\/revisions\/22420"}],"wp:attachment":[{"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/media?parent=22343"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/docs_category?post=22343"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/docs_tag?post=22343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}