Tổng đài tư vấn: 033 688 8648
Hotline: 039 511 6390
Implementing a Modal Popup Activated by Button Click with an Embedded Data List
In the directory Vendor / Module / View / adminhtml / ui_component. Please open the 'ui_component' file where you want to add the button.
![[Magento] - How to create a modal that opens when clicking a button and simultaneously calls a data list within the modal.](/upload/images/Screen%20Shot%202023-12-18%20at%2009_29_07.png)
Here I will add a button to the 'banner_form.xml' form. I will input the content of the file as follows. Please skip the comment section.
![[Magento] - How to create a modal that opens when clicking a button and simultaneously calls a data list within the modal.](/upload/images/Screen%20Shot%202023-12-18%20at%2010_14_52.png)
![[Magento] - How to create a modal that opens when clicking a button and simultaneously calls a data list within the modal.](/upload/images/Screen%20Shot%202023-12-18%20at%2010_15_09.png)
![[Magento] - How to create a modal that opens when clicking a button and simultaneously calls a data list within the modal.](/upload/images/Screen%20Shot%202023-12-18%20at%2010_15_23.png)
And we'll get the result as follows.
![[Magento] - How to create a modal that opens when clicking a button and simultaneously calls a data list within the modal.](/upload/images/Screen%20Shot%202023-12-18%20at%2009_33_43.png)
Please note that in this example, I already have a Banner module and have declared the 'banner_form.xml' file previously. In this instance, we are adding content to this form when declaring it in another module.
![[Magento] - How to create a modal that opens when clicking a button and simultaneously calls a data list within the modal.](/upload/images/Screen%20Shot%202023-12-18%20at%2009_40_12.png)
In this example, I'll display a product list in a modal when the user clicks a button and the modal opens. In the directory Vendor/Module/view/adminhtml/ui_component, I'll create a file named product_listing2.xml
![[Magento] - How to create a modal that opens when clicking a button and simultaneously calls a data list within the modal.](/upload/images/Screen%20Shot%202023-12-18%20at%2010_21_38.png)
![[Magento] - How to create a modal that opens when clicking a button and simultaneously calls a data list within the modal.](/upload/images/Screen%20Shot%202023-12-18%20at%2010_22_37.png)
![[Magento] - How to create a modal that opens when clicking a button and simultaneously calls a data list within the modal.](/upload/images/Screen%20Shot%202023-12-18%20at%2010_23_09.png)
![[Magento] - How to create a modal that opens when clicking a button and simultaneously calls a data list within the modal.](/upload/images/Screen%20Shot%202023-12-18%20at%2010_23_55.png)
![[Magento] - How to create a modal that opens when clicking a button and simultaneously calls a data list within the modal.](/upload/images/Screen%20Shot%202023-12-18%20at%2010_24_28.png)
![[Magento] - How to create a modal that opens when clicking a button and simultaneously calls a data list within the modal.](/upload/images/Screen%20Shot%202023-12-18%20at%2010_24_57.png)
![[Magento] - How to create a modal that opens when clicking a button and simultaneously calls a data list within the modal.](/upload/images/Screen%20Shot%202023-12-18%20at%2010_25_22.png)
![[Magento] - How to create a modal that opens when clicking a button and simultaneously calls a data list within the modal.](/upload/images/Screen%20Shot%202023-12-18%20at%2010_26_04.png)
![[Magento] - How to create a modal that opens when clicking a button and simultaneously calls a data list within the modal.](/upload/images/Screen%20Shot%202023-12-18%20at%2010_26_28.png)
We will get the following result.
![[Magento] - How to create a modal that opens when clicking a button and simultaneously calls a data list within the modal.](/upload/images/Screen%20Shot%202023-12-18%20at%2010_31_30.png)
