This topic contains 4 replies, has 2 voices, and was last updated by Jai Jai 2 months, 1 week ago.

Modal Disappearing When Clicked


  • smauel
    Participant

    Posts: 12
    Member Reply #19065

    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”>Hello, we are currently converting an old Metronic installation to the new design and are working to create our core interior pages (great job by the way, really cool stuff you have developed here!)</p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”>We have a page with the following URL:
    https://www.thea1staff.com/new/inner-tech.php</p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”>There is a link near the title of the page that reads Filter Tech and we want that to open a modal, centered on the page.  When we setup the code it does open the modal, but then immediately closes it.  Not sure if we are missing any supporting JavaScripts or CSS files.  From looking at it I think we have everything we need, so I am not sure why the modal is closing immediately.  Any help you can provide would be greatly appreciated!</p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”>The code on the page is:</p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><!– BEGIN: Subheader –></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><div class=”m-subheader “></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><div class=”d-flex align-items-center”></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><div class=”mr-auto”></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><h3 class=”m-subheader__title m-subheader__title–separator”>Technician Overview</h3></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><ul class=”m-subheader__breadcrumbs m-nav m-nav–inline”></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><li class=”m-nav__item m-nav__item–home”></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none;”><i class=”m-nav__link-icon la la-home”></i></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><li class=”m-nav__separator”>-</p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><li class=”m-nav__item”></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none;”><span class=”m-nav__link-text” data-toggle=”modal” data-target=”#m_modal_6″>Filter Techs</span></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”></div></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><div></div></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”></div></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”></div></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><!– END: Subheader –></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><!– BEGIN: MODAL Tech Filter Form –></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><div class=”modal fade” id=”m_modal_6″ tabindex=”-1″ role=”dialog” aria-labelledby=”exampleModalCenterTitle” style=”display: none;” aria-hidden=”true”></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><div class=”modal-dialog modal-dialog-centered” role=”document”></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><div class=”modal-content”></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><div class=”modal-header”></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><h5 class=”modal-title” id=”exampleModalLongTitle”>Select Technician</h5></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><span aria-hidden=”true”>×</span></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”></button></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”></div></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><div class=”modal-body”></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><select class=”form-control”></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><option value=”201″>201</option></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><option value=”202″>202</option></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”></select></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”></div></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><div class=”modal-footer”></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>Close</button></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><button type=”button” class=”btn btn-primary”>Save changes</button></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”></div></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”></div></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”></div></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”></div></p>
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”></p>
     
    <p style=”margin: 0px; padding: 0px 0px 26px; border: none; color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif;”><!– END: MODAL Tech Filter Form –></p>


    smauel
    Participant

    Posts: 12
    Member Reply #19067

    No idea why it put all that extra code into the display for page.  Re-posting this so it is hopefully easier to read.

    Hello, we are currently converting an old Metronic installation to the new design and are working to create our core interior pages (great job by the way, really cool stuff you have developed here!)

    We have a page with the following URL:
    https://www.thea1staff.com/new/inner-tech.php

    There is a link near the title of the page that reads Filter Tech and we want that to open a modal, centered on the page.  When we setup the code it does open the modal, but then immediately closes it.  Not sure if we are missing any supporting JavaScripts or CSS files.  From looking at it I think we have everything we need, so I am not sure why the modal is closing immediately.  Any help you can provide would be greatly appreciated!

     

    The code on the page is:

    <!– BEGIN: Subheader –>

    <div class=”m-subheader “>

    <div class=”d-flex align-items-center”>

    <div class=”mr-auto”>

    <h3 class=”m-subheader__title m-subheader__title–separator”>Technician Overview</h3>

    <ul class=”m-subheader__breadcrumbs m-nav m-nav–inline”>

    <li class=”m-nav__item m-nav__item–home”>

    <i class=”m-nav__link-icon la la-home”></i>

    <li class=”m-nav__separator”>-

    <li class=”m-nav__item”>

    <span class=”m-nav__link-text” data-toggle=”modal” data-target=”#m_modal_6″>Filter Techs</span>

    </div>

    <div></div>

    </div>

    </div>

    <!– END: Subheader –>

     

    <!– BEGIN: MODAL Tech Filter Form –>

    <div class=”modal fade” id=”m_modal_6″ tabindex=”-1″ role=”dialog” aria-labelledby=”exampleModalCenterTitle” style=”display: none;” aria-hidden=”true”>

    <div class=”modal-dialog modal-dialog-centered” role=”document”>

    <div class=”modal-content”>

    <div class=”modal-header”>

    <h5 class=”modal-title” id=”exampleModalLongTitle”>Select Technician</h5>

    <button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”>

    <span aria-hidden=”true”>×</span>

    </button>

    </div>

    <div class=”modal-body”>

    <select class=”form-control”>

    <option value=”201″>201</option>

    <option value=”202″>202</option>

    </select>

    </div>

    <div class=”modal-footer”>

    <button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>Close</button>

    <button type=”button” class=”btn btn-primary”>Save changes</button>

    </div>

    </div>

    </div>

    </div>

    <!– END: MODAL Tech Filter Form –>

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #19142

    Hi 🙂

    We cannot open your page.

    Metronic v4 by default does not compatible with Metronic v5. The modal close immediately without clicking on any part?

    Thanks

    Attachments:
    You must be logged in to view attached files.

    smauel
    Participant

    Posts: 12
    Member Reply #19144

    Yes it did.  We were only using the new  5 code and figured out what was happening.  The data toggles were in a <span> block outside of the a .  Moving the data toggles from the span to the made the modal function as expected.

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #19147

    Hi 🙂

    Glad you found it. All the best for your projects

    Thanks

You must be logged in to reply to this topic.