Open Modal popup with input fields on selection of mass actions in the admin custom grid.

[hardeepsingh]

I have created custom admin grid using UI component and created mass actions,on selection of mass action I want to show modal popup instead of confirmation alert.

Please share how can I do it.if we pass type modal in place of confirm type in UI component list XML ,it won't work.

Any quick help will be appreciated..

[Rakesh Jesadiya]

You need to debug default magento checkout code for model popup, When any customer click on new address button at that time new form will open in magento checkout using UI Component model.

Open checkout_index_index.xml file from module checkout,
using xml file define model popup refer below xml code in xml file,

<item name="shippingAddress" xsi:type="array">
  <item name="config" xsi:type="array">
      <item name="deps" xsi:type="array">
          <item name="0" xsi:type="string">checkout.steps.shipping-step.step-config</item>
          <item name="1" xsi:type="string">checkoutProvider</item>
      </item>
      <item name="popUpForm" xsi:type="array">
          <item name="element" xsi:type="string">#opc-new-shipping-address</item>
          <item name="options" xsi:type="array">
              <item name="type" xsi:type="string">popup</item>
              <item name="responsive" xsi:type="boolean">true</item>
              <item name="innerScroll" xsi:type="boolean">true</item>
              <item name="title" xsi:type="string" translate="true">Shipping Address</item>
              <item name="trigger" xsi:type="string">opc-new-shipping-address</item>
              <item name="buttons" xsi:type="array">
                  <item name="save" xsi:type="array">
                      <item name="text" xsi:type="string" translate="true">Save Address</item>
                      <item name="class" xsi:type="string">action primary action-save-address</item>
                  </item>
                  <item name="cancel" xsi:type="array">
                      <item name="text" xsi:type="string" translate="true">Cancel</item>
                      <item name="class" xsi:type="string">action secondary action-hide-popup</item>
                  </item>
              </item>
          </item>
      </item>
  </item>
  <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping</item>
  <item name="provider" xsi:type="string">checkoutProvider</item>
  <item name="sortOrder" xsi:type="string">1</item>
</item>

Now refer to component(js file) from above path,Magento_Checkout/js/view/shipping.js

In shipping.js popup component is refer 'Magento_Checkout/js/model/shipping-address/form-popup-state' so you need to debug function in shipping.js

this.isFormPopUpVisible.subscribe(function (value) {
                if (value) {
                    self.getPopUp().openModal();
                }
 });

Now refer getPopUp() method to get input field in popup.