{"id":24560106,"url":"https://github.com/ysfzun/mustang-modal","last_synced_at":"2025-04-19T14:43:52.726Z","repository":{"id":35176210,"uuid":"39433560","full_name":"ysfzun/Mustang-Modal","owner":"ysfzun","description":"No html no cry.","archived":false,"fork":false,"pushed_at":"2018-11-23T12:55:46.000Z","size":187,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T08:51:06.458Z","etag":null,"topics":["iframe","jquery-modal","jquery-popup","modal-dialogs","modal-plugin","mustang-modal","popup"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ysfzun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-21T08:27:24.000Z","updated_at":"2023-11-30T14:35:05.000Z","dependencies_parsed_at":"2022-07-13T21:44:06.867Z","dependency_job_id":null,"html_url":"https://github.com/ysfzun/Mustang-Modal","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ysfzun%2FMustang-Modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ysfzun%2FMustang-Modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ysfzun%2FMustang-Modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ysfzun%2FMustang-Modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ysfzun","download_url":"https://codeload.github.com/ysfzun/Mustang-Modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249716743,"owners_count":21315068,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["iframe","jquery-modal","jquery-popup","modal-dialogs","modal-plugin","mustang-modal","popup"],"created_at":"2025-01-23T07:15:07.108Z","updated_at":"2025-04-19T14:43:52.704Z","avatar_url":"https://github.com/ysfzun.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Why Mustang Modal ?\n\nMany currently used modals use html codes prepared actually for the web page. Mustang-modal, \nallows you to create new modals interacted with javascript codes without the need of any html. It is \nsimple, easy to use and it has many a lot of features. These are;\n\n* Automatically attaching to links are on \"a\" (anchor) and \"button\" elements,\n* Dynamics buttons,\n* Multi modals,\n* Ajax,\n* Animations,\n* Cross window interactions,\n* Opening the iframe page,\n* HTML data display,\n* Changing the dynamic content of the modal,\n* Escape and click close,\n* Allow auto close,\n* OnOpen ve OnClose events,\n* Width and height settings,\n* Responsive design.\n\n# Installing\n\nYou can install with nuget **Install-Package Mustang-Modal**\n\nRequires jQuery 1.7+\n\nIncluding the scripts \u0026 styles\n\n```html\n\u003clink href=\"/Styles/mustang-modal.css\" rel=\"stylesheet\" /\u003e\n\u003cscript src=\"/Scripts/mustang-modal.js\"\u003e\u003c/script\u003e\n```\n\n#Features\n\n### Attaching to a and button elements\n\nFirstly you must add **m-modal** to class attribute.\n\nFor example:\n\n**load:** If you set data-type as load will be ajax request.\n```html\n\u003cbutton class=\"btn btn-danger m-modal\" data-title=\"Sample Title\" data-type=\"load\" data-target=\"/Examples/DummyData/_AjaxLoadingPartial.html\"\u003e\n                        Open Modal With Modal\n                        \u003c/button\u003e\n```\n\n**iframe:** If you set data-type as load will be open url in iframe.\n```html\n \u003cbutton class=\"btn btn-danger m-modal\"\n                            data-title=\"Sample Title\" data-type=\"iframe\"data-height=\"500\" data-target=\"http://www.aksesuarpaketi.com\"\u003e\n                        Open Modal With Iframe\n                    \u003c/button\u003e\n```\n\n**iframe:** If you set data-type as html, the modal will be open html. \n```html\n \u003cbutton class=\"btn btn-danger m-modal\"\n                            data-title=\"Sample Title\" data-type=\"html\" data-target=\"#openTable\"\u003e\n                        Open Modal\n                    \u003c/button\u003e\n```\n\nThe following features you can use\n\n```html\n\n  data-title=\"Sample Title\"\n  data-type=\"html\"\n  data-target=\"#openTable\"\n  data-animate=\"toggle\"\n  data-speed=\"300\"\n  data-width=\"450\"\n  data-height=\"500\"\n  data-escapeclose=\"true\"\n  data-clickclose=\"true\"\n                    \n```\n\n## Open\n\nThe open methods take selector as optional. If you want you can give selector to open method.\n\nFor example:\n\n```javascript\nMustangModal.open($(\"#openTable\"));\n```\n\n### Body\n\nThe **body** property, creates the content of the mustang-modal. Takes the string value. \n\nFor example:\n\n```javascript\nMustangModal.prop({ body: \"Hello world.\" }).open();\n```\n\n### Title\n\nIf you want to set title to Modal, for this you should use **title** property.\n\nFor example:\n\n```javascript\nMustangModal.prop({ body: \"Hello world.\", title: \"This is a title\" }).open();\n```\n\n### Width \u0026 Height\n\nIf you don't set the width and height values, will be responsive design as automatically. Width and Height properties take int values right now.\n\nFor example:\n\n```javascript\nMustangModal.prop({\n\n                body: \"Hello world.\",\n                title: \"This is a title\",\n                width: 250,\n                height: 100\n\n            }).open();\n```\n\n### Buttons\n\nIn mustang-modal you can add many buttons and you can add event for this buttons. The **buttons** property an array. Each row in the array, id, text, style and callback properties. \n\nThese are; \n\n**id**       : Optional field. If id not set, will be added random\n\n**text**     : Optional field. Default name is \"Button Name\".\n\n**style**    : Optional field. This property uses success, primary, info, danger and default.\n\n**callback** : Optional field. This property takes a function. If you click the button, will run this function.\n\nFor example:\n\n```javascript\nMustangModal.prop({\n\n                body: \"Hello world.\",\n                title: \"This is a title\",\n                buttons: [\n                {\n                    id: \"btnClose\",  \n                    text: \"Close\",\t   \n                    style: \"primary\",\n                    callback: function() {\t\t\t\n\n                        alert(\"clicked the close button\");\n                        MustangModal.close();\n                    }\n                }]\n\n            }).open();\n```\n\n### Animation \u0026 Speed\n\nThere are 3 types of animation types. These are slideDown, toggle and fading. slideDown is default type. If you want to adjust the speed of the animation you should use speed property. Default value is 500.\n\n```javascript\n\nFor example:\n\nMustangModal.prop({\n\n            body: \"Hello world.\",\n            title: \"Animation \u0026 Speed\",\n            animate: \"toggle\",\t\t\t\t\n            speed: 1000\n\n        }).open();\n\n```\n\n### Escape Close\n\nWhen the ESC button is pressed mustang-modal closes. Default value is false.\n\nFor example:\n\n```javascript\nMustangModal.prop({\n\n           body: \"Hello world.\",\n           title: \"Escape Close\",\n           animate: \"toggle\",\n           speed: 1000,\n           escapeClose: true\n\n            }).open();\n\n```\n\n\n### Click Close\n \nAllows the user to close the modal by pressing \"Mouse Left Click\". Default value is false.\n\nFor example:\n\n```javascript\nMustangModal.prop({\n\n                body: \"Hello world.\",\n                title: \"This is a title\",\n                animate: \"toggle\",\n                speed: 1000,\n                clickClose: true\t\t\t\n\n            }).open();\n\n```\n\n### Ajax Loading\n\nLoad method takes 3 parameters. These are url, parameters and callback. \n\nFor example:\n\n```javascript\n    MustangModal.prop({\n                title: \"Ajax Loading\",\n                animate: \"toggle\",\n                speed: 1000,\n                height: 250,\n                escapeClose: true               \n            }).load(\"AjaxLoading.html\").open();\n\n```\n### Open Iframe\n\nOpen the page in iframe. For this uses openIframe method. This method takes url parameter.\n\nFor example:\n\n```javascript\n\tMustangModal.prop({ title: \"Open Iframe Example\" }).openIframe(\"IframePage.html\").open();\n```\n\n### Change Body\n\nWhen modal is open you can change the body. For this you can use **changeBody** method.\n\nFor example:\n\n```javascript\n\tMustangModal.prop({\n       title: \"Change Body Example\",\n       body: \"If you want to change the body you can click 'Change The Body' button.\",\n       buttons: [\n       {\n           text: \"Change The Body\",\n           style: \"warning\",\n           callback: function () {\n                    MustangModal.changeBody($(\"#openTable\").html());\n           }\n       },\n       {\n           text: \"Close\",\n           style: \"danger\",\n           callback: function () {\n               MustangModal.close();\n           }\n       }]\n       }).open();\n```\n### Multi Modal\n\nYou can open as many modals as you want.\n\nFor example:\n\n```javascript\n//Open new modal\n   MustangModal.prop({\n   title: \"Multi Modal Example\",\n   buttons: [\n   {\n       text: \"Open New Modal\",\n       style: \"warning\",\n       callback: function () {\n                        \n           //Open new modal 1\n           MustangModal.prop({\n               title: \"New Modal 1\",\n               width: 400,\n               height: 300,\n               buttons: [\n               {\n                   text: \"Open New Modal\",\n                   style: \"success\",\n                   callback: function () {\n                       //Open new modal 2\n                       MustangModal.prop({\n                           title: \"New Modal 2\",\n                           body: \"\",\n                           width: 600,\n                           height: 400,\n                           buttons: [\n                               {\n                                   text: \"Open New Modal 3\",\n                                   style: \"warning\",\n                                   callback: function () {\n                                       //Open new modal 3\n                                       MustangModal.prop({\n                                           title: \"New Modal 3\",\n                                           body: \"\",\n                                           width: 400,\n                                           height: 250,\n                                           buttons: [\n                                               {\n                                                   text: \"Open New Modal\",\n                                                   style: \"primary\",\n                                                   callback: function () {\n                                                   }\n                                               },\n                                               {\n                                                   text: \"Close\",\n                                                   style: \"danger\",\n                                                   callback: function () {\n                                                       MustangModal.close();\n                                                   }\n                                               }\n                                           ]\n                                       }).open(); \n                                   }\n                               },\n                               {\n                                   text: \"Close\",\n                                   style: \"danger\",\n                                   callback: function () {\n                                       MustangModal.close();\n                                   }\n                               }\n                           ]\n                       }).open();\n                   }\n               }, {\n                   text: \"Close\",\n                   callback: function () {\n                       MustangModal.close();\n                   }\n               }]\n           }).open();\n       }\n   }, {\n       text: \"Close\",\n       callback: function () {\n           MustangModal.close();\n       }\n   }]\n   }).open();\n\n```\n\n### onOpen \u0026 onClose Events\n\nWhen modal is open , **onOpen** and **onClose** methods work \n\nFor example:\n\n```javascript\nMustangModal.prop({\n     body: \"onOpen and onClose example.\",\n     onClose: function () {\n        alert(\"modal is closed\");\n     },\n     onOpen: function () {\n        alert(\"modal is opened.\");\n     }\n     }).open();\n```\n\n### Close\n\nThis method closes the modal. For this you can use **MustangModal.close()** method.\n\nFor example:\n\n```javascript\n  MustangModal.prop({\n                body: \"Hello world.\",\n                title: \"This is a title\",\n                buttons: [\n                    {\n                        text: \"Close\",\n                        callback: function () {\n\n                            alert(\"clicked the close button\");\n                            MustangModal.close();\n                        }\n                    }]\n            }).open();\n```\n\n### Multi Modal Close (All Modals)\n\nThis method closes to the all modals. For this you can use **MustangModal.allClose()** method.\n\nFor example:\n \n```javascript\n   MustangModal.prop({\n                body: \"Hello world. 1\",\n                title: \"1. Modal\",\n                buttons: [\n                    {\n                        text: \"New Modal\",\n                        callback: function() {\n\n                            MustangModal.prop({\n                                body: \"Hello world. 2\",\n                                title: \"2. Modal\",\n                                width: 250,\n                                buttons: [\n                                    {\n                                        text: \"New Modal\",\n                                        callback: function() {\n\n                                            MustangModal.prop({\n                                                body: \"Hello world. 3\",\n                                                title: \"3. Modal\",\n                                                width: 150,\n                                                buttons: [\n                                                    {\n                                                        text: \"Close All Modals\",\n                                                        callback: function() {\n\n                                                            MustangModal.allClose();\n                                                        }\n                                                    }\n                                                ]\n                                            }).open();\n                                        }\n                                    }\n                                ]\n                            }).open();\n\n                        }\n                    }\n                ]\n            }).open();\n```\n\n### Allow Auto Close\n\nThis method closes modal automatically. For this you can use **allowAutoClose** property.\n\n```javascript\nMustangModal.prop({ body: \"Hello world.\", allowAutoClose: 2000 }).open();\n```\n\n### Cross Window Interactions\n\nThere are three way for this interactions at the moment. These methods are **load**, **iframe** and **changeBody**.\nFirstly you must use **eq** method. With this method you can select a modal. And then, you can continue to process. :) \n\n**load** : This method takes three parameters. These are url, parameters and callback.\n\n For example:\n\n```javascript\n MustangModal.eq(0).load(\"/Examples/DummyData/_AjaxLoadingPartial.html\");\n```\n\n```javascript\nMustangModal.prop({\n     title: \"Cross Window Interactions Example\",\n     body: \"Click the red button to view load example.\",\n     width: 700,\n     height: 50,\n     buttons: [\n     {\n         text: \"Click Me!\",\n         style: \"danger\",\n         callback: function () {\n             MustangModal.prop({\n                 title: \"Question ?\",\n                 body: \"Are you sure ?\",\n                 width: 300,\n                 height: 25,\n                 buttons: [\n                     {\n                         text: \"Yes\",\n                         style: \"success\",\n                         callback: function () {\n                             //will be loaded to zero modal\n                            MustangModal.eq(0).load(\"/Examples/DummyData/_AjaxLoadingPartial.html\", function () {\n                                 MustangModal.close();\n                             });\n                         }\n                     }, {\n                         text: \"No\",\n                         callback: function () {\n                             MustangModal.close();\n                         }\n                     }\n                 ]\n             }).open();\n         }\n     }, {\n         text: \"Close\",\n         callback: function () {\n             MustangModal.close();\n         }\n     }]\n     }).open();\n```\n\n**iframe** : This method takes only url.\n\nFor example:\n\n```javascript\nMustangModal.eq(0).iframe(\"http://www.aksesuarpaketi.com\");\n```\n\n```javascript\nMustangModal.prop({\n      title: \"Cross Window Interactions Example\",\n      body: \"Click the red button to view iframe example.\",\n      width: 700,\n      height: 50,\n      buttons: [\n      {\n          text: \"Click Me!\",\n          style: \"danger\",\n          callback: function () {\n              MustangModal.prop({\n                  title: \"Question ?\",\n                  body: \"Are you sure ?\",\n                  width: 300,\n                  height: 25,\n                  buttons: [\n                      {\n                          text: \"Yes\",\n                          style: \"success\",\n                          callback: function () {\n\n                              //will be loaded to zero modal\n                              MustangModal.eq(0).iframe(\"your site url\");\n                              MustangModal.close();\n                          }\n                      }, {\n                          text: \"No\",\n                          callback: function () {\n                              MustangModal.close();\n                          }\n                      }\n                  ]\n              }).open();\n          }\n      }, {\n          text: \"Close\",\n          callback: function () {\n              MustangModal.close();\n          }\n      }]\n     }).open();\n\n```\n\n**changeBody** : This method takes html parameter.\n\nFor example:\n\t\n```javascript\nMustangModal.eq(0).changeBody($(\"#openTable\").html());\n```\n\n```javascript\nMustangModal.prop({\n     title: \"Cross Window Interactions Example\",\n     body: \"Click the red button to view changeBody example.\",\n     width: 700,\n     height: 25,\n     buttons: [\n     {\n         text: \"Click Me!\",\n         style: \"danger\",\n         callback: function () {\n             MustangModal.prop({\n                 title: \"Question ?\",\n                 body: \"Are you sure ?\",\n                 width: 300,\n                 height: 25,\n                 buttons: [\n                     {\n                         text: \"Yes\",\n                         style: \"success\",\n                         callback: function () {\n                             \n                             //will load to zero modal\n\t\t             MustangModal.eq(0).changeBody($(\"#openTable\").html());\n                             MustangModal.close();\n                         }\n                     }, {\n                         text: \"No\",\n                         callback: function () {\n                             MustangModal.close();\n                         }\n                     }\n                 ]\n             }).open();\n         }\n     }, {\n         text: \"Close\",\n         callback: function () {\n             MustangModal.close();\n         }\n     }]\n     }).open();\n\n```\n\n**width \u0026 height** : These methods take width and height values.\n\nFor example:\n\n```javascript\nMustangModal.eq(0).width(400); \nMustangModal.eq(0).height(200);\n```\n\n```javascript\nMustangModal.prop({\n     title: \"Cross Window Interactions Example - Width \u0026 Height\",\n     body: \"Click the red button to view changeBody example.\",\n     width: 700,\n     height: 25,\n     buttons: [\n     {\n         text: \"Click Me!\",\n         style: \"danger\",\n         callback: function () {\n             MustangModal.prop({\n                 title: \"Question ?\",\n                 body: \"Are you sure ?\",\n                 width: 300,\n                 height: 25,\n                 buttons: [\n                     {\n                         text: \"Yes\",\n                         style: \"success\",\n                         callback: function () {\n                             //will be loaded to zero modal\n                             MustangModal.eq(0).load(\"/Examples/DummyData/_AjaxLoadingPartial.html\",functio(){\n                               \n                    MustangModal.eq(0).width(400); \n                    MustangModal.eq(0).height(200); \n                                \n                                 MustangModal.close();\n                             });\n                         }\n                     }, {\n                         text: \"No\",\n                         callback: function () {\n                             MustangModal.close();\n                         }\n                     }\n                 ]\n             }).open();\n         }\n     }, {\n         text: \"Close\",\n         callback: function () {\n             MustangModal.close();\n         }\n     }]\n     }).open();\n```\n\n**resetResize** : This method sets the height and width values as automatically.\n\n```javacsript\nMustangModal.eq(0).resetResize();\n```\n\n```javascript\nMustangModal.prop({\n     title: \"Cross Window Interactions Example - Reset Resize\",\n     body: \"Click the red button to view changeBody example.\",\n     width: 700,\n     height: 25,\n     buttons: [\n     {\n         text: \"Click Me!\",\n         style: \"danger\",\n         callback: function () {\n             MustangModal.prop({\n                 title: \"Question ?\",\n                 body: \"Are you sure ?\",\n                 width: 300,\n                 height: 25,\n                 buttons: [\n                     {\n                         text: \"Yes\",\n                         style: \"success\",\n                         callback: function () {\n                             //will be loaded to zero modal\n                             MustangModal.eq(0).load(\"/Examples/DummyData/_AjaxLoadingPartial.html\",functio(){\n                               \n                    MustangModal.eq(0).resetResize(); \n                                \n                                 MustangModal.close();\n                             });\n                         }\n                     }, {\n                         text: \"No\",\n                         callback: function () {\n                             MustangModal.close();\n                         }\n                     }\n                 ]\n             }).open();\n         }\n     }, {\n         text: \"Close\",\n         callback: function () {\n             MustangModal.close();\n         }\n     }]\n     }).open();\n```\n# License\n\nCopyright © Yusuf UZUN \n\nMustang-Modal is distributed under the MIT License. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fysfzun%2Fmustang-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fysfzun%2Fmustang-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fysfzun%2Fmustang-modal/lists"}