RE: How to create popup modal with fragment ?

2023-07-13T08:28:59Z

Create Popup Fragment :

Configuration :

{
   "fieldSets": [
       {
           "fields": [
               {
                   "dataType": "string",
                   "defaultValue": "nm",
                   "label": "size",
                   "name": "buttonSize",
                   "type": "select",
                   "typeOptions": {
                       "validValues": [
                           {
                               "label": "small",
                               "value": "sm"
                           },
                           {
                               "label": "normal",
                               "value": "nm"
                           },
                           {
                               "label": "large",
                               "value": "lg"
                           }
                       ]
                   }
               },
               {
                   "defaultValue": "false",
                   "description": "isButtonIcon",
                   "label": "button-icon-tab",
                   "name": "isButtonIcon",
                   "type": "checkbox"
               },
               {
                   "dataType": "string",
                   "defaultValue": "plus",
                   "label": "icon",
                   "name": "buttonIcon",
                   "type": "text",
                   "typeOptions": {
                       "placeholder": "icon"
                   }
               },
               {
                   "dataType": "string",
                   "defaultValue": "primary",
                   "label": "footer-button-type",
                   "name": "buttonType",
                   "type": "select",
                   "typeOptions": {
                       "validValues": [
                           {
                               "value": "primary"
                           },
                           {
                               "value": "secondary"
                           },
                           {
                               "value": "link"
                           },
                           {
                               "value": "outline-primary"
                           },
                           {
                               "value": "outline-secondary"
                           }
                       ]
                   }
               },
               {
                   "dataType": "string",
                   "defaultValue": "",
                   "label": "modal-alignment",
                   "name": "modalVerticalAlignment",
                   "type": "select",
                   "typeOptions": {
                       "validValues": [
                           {
                               "label": "top",
                               "value": ""
                           },
                           {
                               "label": "centered",
                               "value": "modal-dialog-centered"
                           }
                       ]
                   }
               }
           ]
       }
   ]
}

HTML

<div class="fragment_37">
   <div class="component-button text-break">
       <button class="btn modal-btn btn-${configuration.buttonSize} btn-${configuration.buttonType}" data-toggle="modal" id="fragment-${fragmentEntryLinkNamespace}-link-1">
           [#if configuration.isButtonIcon]
               [@clay["icon"] symbol="${configuration.buttonIcon}" /]
           [#else]
               Go Somewhere
           [/#if]

       </button>
   </div>
   <div class="fragment-modal text-center">
       <div aria-hidden="false" aria-labelledby="fragmentModalLabel" class="fade modal modal-root" role="dialog" style="display: none" tabindex="-1">
           <div class="modal-dialog ${configuration.modalVerticalAlignment} modal-lg">
               <div class="modal-content">
                   <div class="modal-header">
                   <div class="modal-title" data-lfr-editable-id="element-text" data-lfr-editable-type="text" id="fragmentModalLabel">
                           Raise Exception
                       </div>

                   <button aria-labelledby="Close" class="btn btn-unstyled close" data-dismiss="modal" role="button" type="button">
                           [@liferay_ui.icon icon="times" markupView="lexicon" /]
                       </button>
                   </div>

                   <div class="modal-body">
                       <lfr-drop-zone id="modal-body"></lfr-drop-zone>
                   </div>


               </div>
           </div>
       </div>
   </div>
</div>

const editMode = document.body.classList.contains('has-edit-mode-menu');

const fragmentButton = fragmentElement.querySelector('.component-button');

const fragmentModal = fragmentElement.querySelector('.modal-root');

const backdrop = document.createElement('div');

const openModal = () => {
   fragmentModal.style.display = 'block';
   fragmentModal.classList.add('show');

   backdrop.className = 'modal-backdrop fade show';

   document.body.appendChild(backdrop);

   fragmentModal.querySelectorAll('[data-dismiss="modal"]').forEach(item => {
       item.addEventListener(
           'click',
           event => {
               closeModal();
           }
       )
   });
}

const closeModal = () => {
   document.body.removeChild(backdrop);

   fragmentModal.classList.remove('show');

   fragmentModal.style.display = 'none'
}

fragmentButton.querySelectorAll('[data-toggle="modal"]').forEach(item => {
   item.addEventListener(
       'click',
       event => {
           openModal();
       }
   )
});

if (editMode) {
fragmentModal.style.display = 'block';
fragmentModal.classList.remove('fade', 'modal');
}

.fragment_37 {
}

RE: RE: How to create popup modal with fragment ?

2023-06-23T05:58:03Z

Create Basic Fragment from Design (Left side menu bar)

HTML Code -

<div class="fragment_37">
	 <button
	class="btn btn-primary"
	data-target="#claySmallModal-${fragmentEntryLinkNamespace}"
	data-toggle="modal"
	type="button"
>
	Small Modal
</button>
<div
	aria-labelledby="claySmallModalLabel"
	class="fade modal"
	id="claySmallModal-${fragmentEntryLinkNamespace}"
	role="dialog"
	tabindex="-1"
	aria-hidden="true"
	style="display: none;"
>
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<div class="modal-title" id="claySmallModalLabel">
					Modal Title
				</div>
				<button
					aria-label="Close"
					title="Close"
					class="close"
					data-dismiss="modal"
					role="button"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-times"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#times"></use>
					</svg>
				</button>
			</div>
			<div class="modal-body">
				<h4>Modal Body</h4>
			</div>
			<div class="modal-footer">
				<div class="modal-item-last">
					<div class="btn-group">
						<div class="btn-group-item">
							<button
								class="btn btn-secondary"
								data-dismiss="modal"
								type="button"
							>
								Close
							</button>
						</div>
						<div class="btn-group-item">
							<button class="btn btn-primary" type="button">
								Primary
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</div>

Add Fragment in any of Page, and click on Button, Popup modal is not opening.

RE: How to create popup modal with fragment ?

2023-06-22T14:22:20Z

well - the code that you link to obviously works (as demonstrated on that site). How about you provide some more details about what you actually did? Please provide some minimal actual code sample and instructions how to reproduce what you're experiences: Where did you use that sample code? How exactiy?

How to create popup modal with fragment ?

2023-06-19T15:19:20Z

Hi,

I tried to use from Clay site to take sample markup for modal to open via button, but popup modal not going to open.

Reference for Markup - https://clayui.com/docs/components/modal/markup.html