CODEWITHSUNDEEP
javawicket
LDropl
LDropl

Reputation: 934

ModalDialog in wicket 9 doesnt work properly

I'm using Modal Dialog in wicket 9 because the old Modal Window class got deprecated and I'm having some issues with it. In wicket 9 documentation there is no example with ModalDialog. I dont know if I'm using it wrong or it has some bugs

public class MainPanel extends Panel {

    private final ModalDialog modalDialog;

    public MainPanel(String id, IModel<String> headingIdx, IModel<String> collapseIdx) {
        super(id);
        setOutputMarkupId(true);
        modalDialog = new ModalDialog("modalWindow");

        add(new AjaxLink<Void>("showModalDialog") {
            @Override
            public void onClick(AjaxRequestTarget target) {
                modalDialog.setContent(new ModalPanel("content", MainPanel.this){
                    @Override
                    protected void close(AjaxRequestTarget target) {
                        modalDialog.close(target);
                    }
                });
                modalDialog.open(target);
            }
        });
        add(modalDialog);
    }
}


<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org">
<head>
</head>
<body>
<wicket:panel>
        <div class="col-md-1 text-right">
            <a wicket:id="showDeleteDialog" class="btn fa fa-trash p24-2x deleteTrashIcon"></a>
        </div>
    <div wicket:id="modalWindow" class="modalDialog"></div>
</wicket:panel>
</body>
</html>

public abstract class ModalPanel extends Panel {
    public ModalPanel(String id, Panel caller) {
        super(id);
        setOutputMarkupId(true);

        add(new AjaxLink<Void>("cancelBtn") {
            @Override
            public void onClick(AjaxRequestTarget target) {
                close(target);
            }
        });
    }

    protected abstract void close(AjaxRequestTarget target);
}

The problem is that after modal dialog was opened, it doesnt behave like modal dialog.

Did someone use ModalDialog, may be you can share your experience if it does work for you ?

Upvotes: 2

Views: 2768

Answers (2)

rec
rec

Reputation: 10895

If you combine the ModalDialog with Bootstrap, you may have a clash between the modal-dialog class used by the Wicket ModalDialog HTML template and the Bootstrap class of the same name. In particular, the Bootstrap modal-dialog class turns off pointer events causing clicks in the modal dialog to have no effect.

To fix this, you can add the Bootstrap modal-content to the Wicket ModalDialog content element:

add(new AjaxLink<Void>("showModalDialog") {
  @Override
  public void onClick(AjaxRequestTarget target) {
    Panel content = new MyContentPanel("content");
    content.add(AttributeModifier.append("class", "modal-content"));
    modalDialog.open(content, target);
  }
});

Alternatively, you can add the modal-content class to root node of the HTML template of the Panel you use for the modal dialog's content.

Upvotes: 4

martin-g
martin-g

Reputation: 17503

Your code looks OK to me!

You can compare it against the example:

Upvotes: 4

Related Questions