vadimsva / popmodal

jquery plugin for showing tooltips, titles, modal dialogs and etc

popModal

This library includes 6 components:
popModal - popup window, displayed near the parent element. Invoked by clicking on an element
notifyModal - notification popup, displayed on top of all elements. Invoked by event and hide after a certain time
hintModal - tooltip, displayed near the parent element. Invoked on mouse hover on an element and hide after element lost focus
dialogModal - modal dialog for big content or collection of content, displayed on top of all elements. Invoked by clicking on an element
titleModal - tooltip, displayed near the parent element, replace native title. Invoked on mouse hover on an element and hide after element lost focus
confirmModal - modal dialog for alert or confirm content, displayed on top of all elements. Invoked by clicking on an element

For work required only jQuery, other libraries are not required.

Documentation

DOCUMENTATION & EXAMPLES

License

The MIT License (MIT)

popmodal's Issues

beforeLoadingContent and data- attributes.

beforeLoadingContent is hard-coded. Please allow the user to specify it as an option, either globally, or before calling the popup. "Please, waiting..." is awkward English. I like to use element, personally.

Also, are you able to change all your data- attributes to lower case? See: http://stackoverflow.com/questions/20985204/does-jquery-internaly-converts-html5-data-attribute-keys-to-lowercase This seems to indicate you should use lower-case characters only, maybe put dashes instead of upper... Thanks!

popModal not working on IE10+

How do i make it work on IE10+ versions

Bower

Add package to bower.

Does this code come with an open-source license?

Is this licensed under Apache or MIT open-source licenses?

Many thanks,
Darren

Incompatibility with AngularJS

The problem is that angular manage the UI, so when you use jquery to access directly to the DOM, we are breaking the architecture, the correct way to perform the access is using directives, I think is necessary to renderize every thing using a directive, similar to UI Bootstrap against Bootstrap.js.

Don't hide the div content?

Hello,

I have implement the sample popModal and this is run fine. My question is how to hold the div hold show when i clic the button to show the div content. (I don´t want when i clic the button no hidden the div content).

Hope you can help me the issue?..

thank you

hintModal and firefox maybe others

hi

thanks for your work great functionality in a small package

hintModal won't work on firefox because of innerText try to use textContent
for more info read this http://perfectionkills.com/the-poor-misunderstood-innerText/

Attribute for ok button not working.

I've found that when I use the attribute for the "ok" button that is specified in the docs:
data-popmodal-but="ok"

the event listener for the "ok" button is not being called.

This issue is resolved when I use the attribute like this:
data-popModalBut="ok"

Set custom width for popModal

It there a way to set a custom width for the popup window?

Can not get input value

I put an "input" on confirmModal_content.
like:

<div id="content" style="display:none">
<div class="confirmModal_content">
<input type="text" id="SC" size="12" class="form-control" >
</div>
<div class="confirmModal_footer">
<button type="button" class="btn btn-primary" data-confirmmodal-but="ok">OK</button>
<button type="button" class="btn btn-default" data-confirmmodal-but="cancel">Cancel</button>
</div>
</div>

But I can't not get the input value by document.getElementById("SC").value

Hot to use Dalog POPUPMODAL in different DIV tags

I am currently trying to use DIALOG popup modal in multiple places in same HTML file to display different information but it is not working. I have done this by simply copy-paste the DIV portion wherever i have needed it.

Can you gugide me as to how make it work in multiple places.
I will be obliged
Regards
Ajay

Not working with jQuery1.11.3

Hi,

I imported this into my workspace. The pop modal is working when the jQuery version is 1.12 or above, but not working with 1.11.3 (which is the version that our organization is using).

Are there any plans to make it work with jQuery 1.11 or lesser version?

Kind regards,

Accesibility

In the full screen modal dialogs, focus only should present on the dialog elements.

But while tabbing out, focusing is shifting to elements out of dialog box

length issue in hintmodal

Hi,

just had an issue in hint-modal, the content length must be more than 1 character to show the hint-modal.

Regards
Burhan

Bootstrap buttons compatibility

Don't have time to explain, watch :)
http://jsbin.com/hefayoxoba/1/edit?html,output

DialogModal doesn't show gmap

I've written the code using bootstrap dialog, it worked ok, but when It was changed to DialogModal, it didn't work anymore, I tried a lot of solutions, but I couldn't solve it, the map container of the gmap is showed as a grey background, but nothing more is showed.

titleModal on Ajax loaded elements

How do we apply titleModal on ajax loaded elements?

dialogModal moves up after being displayed.

I've noticed that when I call dialogModal(), the dialog is displayed and then slightly moves up a bit. Even on the [example page | http://vadimsva.github.io/popModal] it's happening there as well. Is there anything I should do to prevent the dialog from moving?

Thanks for the component.
Rob.

Popmodal on dynamic elements

I'm having an issue where popModal is not creating a popup if the element was not registered in the dom initially.

For example if I add a row that has a popModal powered button the button will not work. If I save the data and reload the page with my new row showing up then the popModal popup works.

Any idea how to solve it?

inline bind moves contral content without scroll bar

HI I noticed today that when I move my page to a wider screen that does not have a scroll bar displayed, when you click on the button to display the content everything shifts about 20 pixels to the left. I have even tried with the original file and deleted everything except the default params and inline bind and same issue. I have even tried forcing a scroll bar using:
html {
overflow-y: scroll;
}

Yet same issue. Is there a fix for this?

Thanks

Eddie

IE error [Object doesn't support property or method 'append'][Unable to get property 'innerHTML' of undefined or null reference]

Hi,

I have little issue in working of the popModal in IE11, in my implementation i have no problem in other browsers but for IE11 I am getting same error which is occurring on the sample page of yours.

above on dialogmodal

above on confirm.

If you could help as I have implemented it heavily on my app.
any work-around will be appreciated.

Thanks

IE9 issue

I found an issue with the "dialogModal" examples in IE9 which I can't figure out a fix for.

In IE9 if you open the examples page "index.html". Then in the tab menu go to "dialogModal". Then click either one of the examples and you will see the black overlay show but not popup box.

Any idea on what is causing this?

Tested it with: 1.18 [05.08.15] and 1.19 [04.09.15]

Thanks

dynamic dialogModal

How can I get dynamic content by AJAX in the dialogModal variant?
Thank you.

Safari glitch

Dear vadimsva,

The demo example page is looking weired on Apple Safari.
Whole layout is distorted.

In my app confirm modal is working fine but modal dialogue just shrink with scroll bar visible.

modal dialogue

Thanks

Close popup when clicked outside popup

I have solved it this way:

$(document).click(function(event) {
    try {

      if(jQuery().dialogModal != 'undefined' && $('.dialogModal .dialogModal_content').is(":visible")){

        var elemTarget = event.target || event.srcElement;

        if ($(elemTarget).hasClass('dialogModal') && $(elemTarget).hasClass('open') ) {
            $('html').dialogModal("hide");
        }

      }

    }catch(err) {
      console.log(err);
      return false;
    }

  });

I would like to find the event already available in the library.
Welcome any comments to improve the event.

dialogModal on open, source inner html is destroyed

Hello!
Was wondering if you have plans to update this library or fix issues?
If yes, there's a bug when opening a modal: the source html is destroyed and moved to the popover contained.
So after closing the modal, it's not possible to open it anymore, since the source is gone (and js throws an error about it, not finding content).

not able to access jquery.html()

i am using yours dialog modal in my website but i unable to use jquery .html() inside it. can you tell me how i use html() in dialog modal

Feature Request: Add option for custom class

By adding an option to define an additional custom css class for the popmodal container it would be easier to use multiple custom styled modals.

Full screen modal overlay

Enhancement:

How a single button can be used for full screen modal overlays in mobile
and
tooltips in desktop breakpoints