I came across this miracle in my hands. http://jsfiddle.net/82zah5pd/
It used to work. Then it stopped (apparently something was fixed).

The essence of the code is as follows. When you click on the button, the svg window opens
But it opens only if on page 1 a button opens this window and the window itself.

If there are two buttons and 2 windows too, nothing works.
Here is a readable view where there is 1 button - http://rghost.ru/8pDtBbknj
And here are 2 buttons - http://rghost.ru/7ksCcGDNs
The differences there are:
Created a copy of the dialogFx.js file (dialoggFx.js). It changed

this.ctrlClose = this.el.querySelector( '[data-dialog-close]' );

On

 this.ctrlClose = this.el.querySelector( '[dato-dialog-close]' );

In the html file itself, the changes are visible (just all copied and changed the data to doto, somedialog to homedialog)
Generally quiet horror that still does not work.
Accordingly, the question is: How to make this code work (it is advisable, of course, not to use the * version of the ovoknod as in the example), but the main thing that would work

  • A tip for the future: use version control systems (git, bzr) - Oceinic
  • dato-dialog-close is an attribute in html - check if he or he is there doto-dialog-close - in any case it is better to return data - as a standard prefix for user attributes - Grundy

1 answer 1

The whole problem lies in the constructor.

 function DialogFx( el, options ) {

specifically in line

 this.ctrlClose = this.el.querySelector( '[dato-dialog-close]' );

here it is strictly stated that we are looking for an element with the dato-dialog-close attribute, but in the markup - of two dialogues, there is only one such attribute.

therefore, for another dialog, this selector returned null and accordingly fell when the handler for click was trying to hang for it.

As a solution, you need to bring everything to a monotonous form: for example, leave it in js '[dato-dialog-close]' and in html change everything -dialog-close to dato-dialog-close .

  • See what happens. In html we connect dialogFx.js once. In which there is a data attribute. In html there are two buttons for one data attribute and another for dato. Two divs with different id (somedialog, homedialog). Despite the fact that the buttons that open these windows have different attributes — the closing buttons are the same — data. And in the script itself, at the bottom of the page, everything is different. Data to somedialog, dato to homedialog. And why everything is different everywhere. In addition to the close buttons, there is only data. it works. - HoPkInS
  • @HoPkInS, I did not understand what you wanted to say :-) answer helped or not? or not tried? - Grundy
  • The answer helped. I just do not understand why it works in that case. - HoPkInS
  • @HoPkInS, but I'm already confused :-) the bottom line is that when you create, you send links to specific elements somedialog = document.getElementById( dlgtrigger.getAttribute( 'data-dialog' ) ), dlg = new DialogFx( somedialog ); and homedialog = document.getElementById( dlgtrigger.getAttribute( 'dato-dialog' ) ), dlg = new DialogFx( homedialog ); therefore, we have all the elements, but we define the close button already in the constructor, rather than passing it outside, so it fell when it did not find it - Grundy
  • one
    because there are no overloads in javascript - if you connect two files with the same functions, it will eventually be executed the way that is connected last - Grundy