GWT-Bootstrap Modal not shown after setVisible is called

I have a simple modal that I want to show when a button is clicked.

Here's the Code that I'm using to show the Modal

    @UiHandler("submit")
    void handleClick(ClickEvent e){
        ModalDialogDemo modalDialog = (ModalDialogDemo) RootPanel.get().getWidget(2);
        modalDialog.setHeight("200px");
        modalDialog.setWidth("100px");
        modalDialog.setVisible(true);
        if(modalDialog.isVisible()){
            System.out.println("Successfully Displayed the Modal!");
        }
        else{
            System.out.println("Something went wrong.");
        }
    }

Even though the Modal isn't displayed on the screen the Message logged onto the console is the former i.e. Successfully Displayed the Modal!

I did some digging with firebug and before the button is clicked the rendered HTML is

    <div>
    <div class="modal" style="display: none;" aria-hidden="true">
    <div class="modal-header"><a class="close" data-dismiss="modal">×</a><h3>Name</h3></div>
    <div class="modal-body"><div class="gwt-Label">Modal Content Comes Here</div></div>
    <div class="modal-footer"><div class="gwt-Label">And this is the footer</div></div></div>
    </div>

after the button is clicked it changes to

    <div style="height: 200px; width: 100px;" aria-hidden="false">
    <div class="modal" style="display: none;" aria-hidden="true">
    <div class="modal-header"><a class="close" data-dismiss="modal">×</a><h3>Name</h3></div>
    <div class="modal-body"><div class="gwt-Label">Modal Content Comes Here</div></div>
    <div class="modal-footer"><div class="gwt-Label">And this is the footer</div></div></div>
    </div>

The first div has the height and width that I set applied and the aria-hidden also cleared but the child div which actually contains the modal isn't affected.

I don't know how I can tell GWT to apply the changes to the child div also, can someone help me out with this?

Edit: This is my ModalDialogDemo.ui.xml

    <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
        xmlns:g="urn:import:com.google.gwt.user.client.ui"
        xmlns:b = "urn:import:com.github.gwtbootstrap.client.ui">
        <g:HTMLPanel>
            <b:Modal title="VipName" backdrop="STATIC">
                <g:Label>Modal Content Comes Here</g:Label>
                <b:ModalFooter>
                    <g:Label>And this is the footer</g:Label>
                </b:ModalFooter>
            </b:Modal>
        </g:HTMLPanel>
    </ui:UiBinder>

Solution

You need to call the show() method on a GWT-Bootstrap modal object to display it.

Updated:

In ui.xml file, Assign one id for modal.

<b:Modal title="VipName" ui:field="vipNameModel" backdrop="STATIC">

In ModalDialogDemo.JAVA file, Get that object.

@UiField
    Modal vipNameModel;

Create getter method:

Modal getVipNameModel()
{
return vipNameModel'
}

then call, modalDialog.getVipNameModel().show(); from ModalDialogDemo class