1. Home
  2. Development
  3. RE: How to create popup modal with fragment ?

RE: How to create popup modal with fragment ?

Vishal Shah, modified 2 Years ago.
How to create popup modal with fragment ?
Junior Member Posts: 33 Join Date: 2/1/12 Recent Posts

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

fragment administration liferay fragment
thumbnail
Olaf Kock, modified 2 Years ago.
RE: How to create popup modal with fragment ?
Liferay Legend Posts: 6441 Join Date: 9/23/08 Recent Posts

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​​​​​​​?

Vishal Shah, modified 2 Years ago.
RE: RE: How to create popup modal with fragment ?
Junior Member Posts: 33 Join Date: 2/1/12 Recent Posts
  1. Create Basic Fragment from Design (Left side menu bar)
  2. 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>

     

  3. Add Fragment in any of Page, and click on Button, Popup modal is not opening.
Vishal Shah, modified 2 Years ago.
RE: How to create popup modal with fragment ? (Answer)
New Member Posts: 3 Join Date: 3/28/18 Recent Posts

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>

  • JS

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');
}

  • CSS

.fragment_37 {
}