Opening Modal through Javascript

[dhunink]

Hi,

on https://theme.co/docs/toggleable#programmatically it’s described how a modal can be openend programatically. I’ve tried to implement that, but so far, it isn’t working.

The modal settings:

The Javascript:

var button = document.getElementById("code-check");
var code_input = document.getElementById("code-input");
var code_correct = 629;

button.onclick = function(){
  var cur_value = code_input.value;
  if(cur_value == code_correct){
    alert("klopt");
    window.xToggleUpdate('modal-code-correct', true)
  }
}

The alert is firing, the modal isn’t. What am I missing here?

[ruenel]

Hello @dhunink,

Thanks for writing in! The modal element toggle hash could be the issue. Could you please share the URL of the page where you have applied this JS code so that we can investigate?

Cheers.

[dhunink]

I’ve added a secure note to the original post!
The Toggle buttons is the hamburger-button, and it should fire when the input field has ‘629’ as value and the red button is clicked.

[ruenel]

Hey @dhunink,

The window.xToggleUpdate(id, state); uses the data-x-toggleable attribute. Your JS code would be like this:

var button = document.getElementById("code-check");
var toggleElement = document.getElementById("modal-code-correct-anchor-toggle");
// var modal = document.getElementById("modal-code-correct-modal"); 
var toggleable = toggleElement.getAttribute("data-x-toggleable");
// var toggleable = modal.getAttribute("data-x-toggleable");

button.onclick = function(){
  
    //alert("klopt");
    window.xToggleUpdate(toggleable, true)

  //alert(document.getElementById("code-input").value);
}

Hope this helps.

[dhunink]

Hi @ruenel,

that works indeed, but it’s different then the more simple way described at https://theme.co/docs/toggleable#programmatically. I think that’s the more elegant way and I really want to implement it, keeping up with latest possibilities. What do I need to do in order to toggle a modal with just one line of code, saying 'window.xToggleUpdate('modal-code-correct, false)'?

[ruenel]

Hey @dhunink,

Having window.xToggleUpdate(toggleable, false) should close the Modal. You will need that data-x-toggleable attribute of the Modal.

Thanks.

[dhunink]

Hi @ruenel,

maybe we misunderstood each other, because I posted code referring to closing the modal, but asking how t open it.
For me however it comes down to closing or opening a modal with a single line of code.
The documentation shows:

button.onclick = function(){
window.xToggleUpdate('x-nav-wrap-mobile', false)
}

You suggested:

var button = document.getElementById(“code-check”);
var toggleElement = document.getElementById(“modal-code-correct-anchor-toggle”);
var toggleable = toggleElement.getAttribute(“data-x-toggleable”);
button.onclick = function(){
window.xToggleUpdate(toggleable, true)
}

That’s three lines of code more than the example.
Since I’m trying to open/close several modals through custom JS, I want to minimize the lines of code needed, and the documentation states that is indeed possible. Although your solution works, I’m trying to either realize the same with less lines of code, or unfortunately point out a bug in either the software or the documentation.

[ruenel]

Hey @dhunink,

The example code in the docs is using the default mobile navigation menu.

The code needs the “data-x-toggleable” attribute of the modal, offcanvas or any element you are targetting to open/close. As stated in the docs, it is the style ID plus the element ID:

You can reduce few lines of code if you are targetting default theme elements. Since you are trying to custom a custom built page, this is why you need extra line of code.

Hope this makes sense.