Discussion on Dockmodal -Gmail like Dockable Modal Dialog Plugin

uxMine

uxMine supports this item

Supported

29 comments found.

Hi, in footer buttons sample, is it possible to post form data to another page on click button.

Your “jquery.dockmodal.css” is not getting loaded. Please verify that. Then your ”#dialog11” div is inside your button ”#button8”. You need to write the html properly. I suggest you consult with any html css developer and she might help you on this.

that works fantastic done it was the jquery.dockmodal.css that was not loading.

Try this html code. I have fixed it so that you can compare and figure out what was wrong before:

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="bootstrap.css" rel="stylesheet">
    <link href="css/jquery.dockmodal.css" rel="stylesheet"/>
    <link rel="stylesheet" href="assets/css/demo.css" media="screen"/>
    <link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>

    <!-- <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> -->
    <script type="text/javascript">
        $("#button9").click(function () {
            if ($("#my-data1011").length) {
                // already exists in the page
                $("#my-data1011").dockmodal();
            } else {
                $.get("ajax-data.txt", function (data) {
                    $('<div id="my-data1011" />').html(data).dockmodal({
                        initialState: "docked",
                        title: "Ajax latin content",
                        width: 500,
                        showClose: true,
                        showPopout: false,
                        showMinimize: true
                    });
                });
            }
            return false;
        });

    </script>

    <button type="button" class="btn btn-default btn-embossed" data-dismiss="modal" id="button9">Cancel</button>
    <button type="button" class="btn btn-default btn-embossed" data-dismiss="modal" id="button8">bttn8
        <div id="dialog11" title="Minimized">
            <h2>Lorem ipsum dolor</h2>
            <input type="text" id="inp"/>

            <p>Lorem ipsum dolor sit amet, ut pri voluptua forensibus, usu alii intellegam scribentur an, phaedrum adipiscing nec an. Nec id sonet eloquentiam, ei postea percipit cum. Velit rationibus ex sit, in has possim disputationi concludaturque, mea at vitae noluisse. Amet reformidans an per, alterum albucius pri cu. Ut his amet quas audire. Per quando tation ei.</p>
            <h4>Sit ei illum errem</h4>

            <p>Sit ei illum errem maiorum. Eu latine mandamus sea. Te eam dolore partem. Tincidunt democritum appellantur quo te. Eum no veri detracto, ne wisi nemore forensibus est. Te utroque deserunt principes est, id utinam tractatos vim, summo primis discere ei has.</p>
            <h4>Sea wisi postulant scripserit</h4>

            <p>Sea wisi postulant scripserit in, invidunt mandamus mea in. Mea evertitur mnesarchum ex. Ne movet mnesarchum his. In vix porro quaestio, sit viderer diceret quaestio no.</p>

            <p>Eirmod conclusionemque ex pri. Cum cu integre mandamus, quo wisi phaedrum consetetur cu. In scaevola deseruisse mel, esse placerat erroribus vel no, illud postulant conceptam sea an. Omnes corpora democritum mei ea, quo quando lobortis ut. Eam no idque tempor nominati. Vel habemus argumentum ei. Ipsum scribentur in nam, volutpat mnesarchum no quo.</p>

        </div>
    </button>

    <!-- <script type="text/javascript" src="js/jquery.js"></script> -->
    <script src="js/jquery.dockmodal.js"></script>
    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/js/jquery-1.9.1.min.js"></script>
    <script src="assets/js/jquery-migrate-1.1.1.min.js"></script>
    <script src="assets/js/jquery.scrollTo.js"></script>
    <script src="assets/js/jquery.easing.js"></script>
    <script src="assets/js/jquery.dockmodal.js"></script>
    <script src="assets/js/script.js"></script>
    <script type="text/javascript">
        $("#button8").click(function () {

            $("#dialog11").dockmodal({
                initialState: "docked",
                title: "A content",
                width: 300

                //     buttons: [
                // {
                //     html: 'Cancel',
                //     buttonClass: 'btn btn-primary',
                //     click: function (e, dialog) {
                //         // do something when the button is clicked
                //         dialog.dockmodal("close");
                //     }
                // }, {
                //     html: 'Ok',
                //     buttonClass: 'btn btn-primary',
                //     click: function (e, dialog) {
                //         // do something when the button is clicked
                //         dialog.dockmodal("close");
                //     }
                // } ]
            });

        });

    </script>

in the example page, i add a link to #dialog1 content like this:

When dialog1 open in “modal” state, and clike link1, it work well, #dialog2 open state is “modal”, but when #dialog2 state is minimize and reclick “Link1” on #dialog1 ( when #dialog2 minimize, the #dialog1 modal state is “modal” ), #dialog2 open modal alway is “docked”;

I want to #dialog2 always modal state is “modal” when click and click “Link1”.

<div id="dialog1" title="Basic modal">
<h2><a href="#" onclick="$('#dialog2').dockmodal({initialState: 'modal'});">Link1</a>.........</h2>......

</div>

I am really sorry but I can not understand the requirement properly. Maybe you would like to show me more codes or an example page where I can fix the issue you are having.

Could you add some features? Such as the normal application windows, it can move when left click down on the modal title And the modal can resize.

Those are very nice features. I will add them to the next version.

Hi,

I’ve just purchased your plugin as it allows multiple windows/popups to be opened, but also you can load in your own content within the window/popup quite easy. That said i was wondering if you can help me with something as my jquery is limited and on a steep learning curve.

Button/Example 9 where you pull in a Table is almost a perfect example of what im wanting to use your plugin for, however i want to be able to click on any CELL within the table and what ever text is within that cell, an alert() box displays the text within that cell. However im unsure where i am meant to place the code to do that.

$("#button9").click(function () { $.get("ajax-content.txt", function (data) { $("<div />").html(data).dockmodal({ initialState:"docked", title:"Ajax content", width:300, buttons:[ { html:'Cancel', buttonClass:'btn btn-primary', click:function (e, dialog) { // do something when the button is clicked alert($(e.target).text()); // CUSTOM *********** dialog.dockmodal("close"); } }, { html:'Ok', buttonClass:'btn btn-primary', click:function (e, dialog) { // do something when the button is clicked dialog.dockmodal("close"); } } ] }); }); return false; });

You dont need to do anything within the button callbacks. You should capture the “create” event and attach a click event to the content. Check the following example, look at how I used the “create” event.

$("#button9").click(function () {
    $.get("ajax-content.txt", function (data) {
        $("<div />").html(data).dockmodal({
            initialState: "docked",
            title: "Ajax content",
            width: 300,
            buttons: [
                {
                    html: 'Cancel',
                    buttonClass: 'btn btn-primary',
                    click: function (e, dialog) {
                        // do something when the button is clicked
                        dialog.dockmodal("close");
                    }
                },
                {
                    html: 'Ok',
                    buttonClass: 'btn btn-primary',
                    click: function (e, dialog) {
                        // do something when the button is clicked
                        dialog.dockmodal("close");
                    }
                }
            ],
            create: function( dialog ) {
                dialog.on("click", "td", function(){
                    alert($(this).text());
                })
            }
        });
    });
    return false;
});

I just downloaded this code, but I’m having difficulty understanding the help files. Do you have a simple example of just one button on a page that opens up one docked modal? I’m not understanding where I’m supposed to be setting up the configuration. Thanks.

Suppose you have a div in your page that holds the content you want to show in the modal:
...
Now, in your jQuery code, you need to initiate it like this:
$(”#dialog”).dockmodal({ initialState: “docked” });
That’s all. Hope that helps.

<!doctype html>

<head> <meta charset=”utf-8”> <title>DockModal Window</title> <link rel=”stylesheet” href=”css/jquery.dockmodal.css”/> <script type=”text/javascript” src=”http://code.jquery.com/jquery-1.8.3.js”></script> <script src=”js/jquery.dockmodal.js”></script> </head>

<button type=”button” class=”btn btn-primary pull-right” id=”button1” href=”#”>Start Live Chat Now</button>

<iframe height=”510” width=”400” src=””></iframe> <script type=”text/javascript”> $(”#dialog1”).dockmodal({ initialState: “docked”, width: 480, height: 600, minimizedWidth: 200, gutter: 0, poppedOutDistance: “6%”, title: “title”, dialogClass: “custom-dialog”, animationSpeed: 400, showClose: true, showPopout: false, showMinimize: true, }); </script>

That’s the code that I have right now. The window appears upon page load instead of when the button is clicked and if the window is closed, the content appears on the page.

Greetings. I REALLY like your script. What I need is a modal dialog that I can populate from a MySQL database and allow the user to make changes (basically a CRUD form). After the data has been entered it would be nice to repopulate the main form, but I could live without that. So what I need to know is if its possible using your script to create a complete form and update the database from the values.

Thanks!

Is there a way to make the popup always popup up in the Far Right? So for example I have 1 popup which is 100% and it tells me who’s online then when I create the other popups they will show up to the Left of it? thanks in advance.

The popups always open from the far right. When the 2nd one opens, it takes space just left of the previous one. You can check sample examples.

Hi How can I move the docking from right? cant figure out its def in CSS? thanks

Create a div with display: none and keep all your modal contents inside that hidden div. That way your contents wont be visible unless a dialog is called. The following example keeps 3 dialog contents inside a hidden div.
<div style="display:none">
    <div id="dialog1" title="Basic modal">...</div>
    <div id="dialog2" title="Another modal">...</div>
    <div id="dialog3" title="A third modal">...</div>
</div>

About docking-from-the-right issue, it’s currently the default behavior of the plugin and the necessary styles are built with JavaScript as there involves some calculations. You wont be able to find that in CSS. You can try changing the plugin code to get some different results.

Thank you so much

is there a way for me to fire a function on the event for pop in and pop out, I have a table control that needs to be resized with layout change thanks

Yes, there are a whole bunch of events that can be hooked on to. Please refer to the “Events” section (end of the page) for the list of events and how to use those: http://uxmine.com/demo/dockmodal/#!/events Something like this should work:
$("#dialog1").dockmodal({
    popout: function( event, dialog ) {
        $(dialog).find("table").width(500);
    }
});
by
by
by
by
by
by