How to create a modal box ?

  • Hello,


    it was pretty simple to create a modal box in WCF 2.0 2.1, but now, i don't really know how to do it..


    Do you have any idea to do it simply ?


    I tried the old way to do that, but it doesn't work of course :P


    Thank you !


    Old way :


  • It should work the same way, as there is a polyfill in place that transparently maps the above calls to the new API.


    If your code above is exactly as authored, you'll need to alter <script> and have it read <script data-relocate="true">. WSC 3 is more restrictive on the jQuery usage and requires it to be executed late in the rendering cycle, so depending on the location of your script tag, jQuery might not have been loaded yet.


    Also you should consider wrapping the jQuery code inside $(function() { /* your code */ }); in order to prevent premature execution.

  • It should work the same way, as there is a polyfill in place that transparently maps the above calls to the new API.


    If your code above is exactly as authored, you'll need to alter <script> and have it read <script data-relocate="true">. WSC 3 is more restrictive on the jQuery usage and requires it to be executed late in the rendering cycle, so depending on the location of your script tag, jQuery might not have been loaded yet.


    Also you should consider wrapping the jQuery code inside $(function() { /* your code */ }); in order to prevent premature execution.

    Unfortunately, i tried, but it doesn't work.


    I tried to change "aria-hidden" from true to false with jQuery too, but nothing : https://www.w3schools.com/jquery/html_attr.asp


    Here is my code :




    You can see it live here : https://dev.geeklabs.fr/index.php?a-test-page/

  • Seams like there are a few things missing in your code...

    The Button has no ID, so you don't even bind a click event to it.

    You need to event.preventDefault(); the default action in oder to stop your page from jumpimg to top every time you push the button ;)


    After adding the id it is simple to add the modal:

    Code
    1. $('#myModal').click(function(event) {
    2.     event.preventDefault();
    3.     $('#modal').wcfDialog('open');
    4. });

    Also your dialog modal is just wrong, everything arround it will be added automatically by the framework, so just add:

    Code
    1. <div id="modal" style="display:none;">
    2.     <p>Bonjour</p>
    3. </div>

    thats it^^

  • Just a little precision, i want to add a title to my modal, but... i don't know how :P


    I tried "title: 'Hello';" but it doesn't seems to work, maybe i didn't placed it in the right place.


    Thanks :)

  • Works for me...


    There is no footer by default, so you cant edit it...

  • How to turn this as BBcode ?