Federico Posted January 6, 2018 Share Posted January 6, 2018 Hi all, I couldn't find so far any post covering this, so here's the bottom line: How can you add button in custom module that opens a modal window? I know how to do it just from a custom link like this <a id="ID" href="' . $this->wire('config')->urls->admin . '/page/add/?parent_id=1039&modal=1" class="pw-modal addNewField ui-button ui-widget ui-corner-all pw-head-button ui-state-default"><span class="ui-button-text" name="button" value="Create new project code" type="button"><i class="fa fa-plus-circle"></i> your text</span></a> which opens the modal correctly, but I can't add it to the header section of the admin module (the button at the top we normally see in all pw pages) - I can only add it to the bottom of the page. Instead, using built-in button (like below) it is pw taking care of placing buttons both in header and at the bottom. The problem is that the button tag itself seems not compatible with the modal window (modal window drops after a blink). $btnAddNew = $this->modules->get("InputfieldButton"); $btnAddNew->showInHeader(); $btnAddNew->href = "{$this->wire('config')->urls->admin}page/add/?parent_id=1101&modal=1"; $btnAddNew->aclass = "pw-modal"; Suggestions? Link to comment Share on other sites More sharing options...
kixe Posted January 6, 2018 Share Posted January 6, 2018 You need to enable 'modal' in module JqueryUI Don't set the href attribute. In this case the button will be wrapped by an anchor tag and you will be redirected to the url which you want to open in the modal. Use 'data-href' instead. If you set the property 'aclass' a class attribute value will be added to the anchor wrapper not to the button itself. Use function addClass() instead. Try this: wire('modules')->get('JqueryUI')->use('modal'); $btnAddNew = wire('modules')->get("InputfieldButton"); $btnAddNew->attr('data-href', wire('config')->urls->admin."page/add/?parent_id=1101&modal=1"); $btnAddNew->attr('id', "MyCustomAddPageButton"); // required for the additional button on top $btnAddNew->showInHeader(); $btnAddNew->addClass("pw-modal"); 5 Link to comment Share on other sites More sharing options...
Federico Posted January 6, 2018 Author Share Posted January 6, 2018 Very clear @kixe! Now I understand why the buttons were redirecting me to another page instead of the modal, it was the "href" attribute instead the "data-href". Thanks a lot Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now