How to open modal not user button?

[hoangemini]

I want to use JQuery to open it but don't need any other buttons to open it. Ex:

<div id="inline" style="display:none;">
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>

<script>
$('#inline').modaal('show');
</script>

But not

<button class="inline">Show</button>
<div id="inline" style="display:none;">
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>

$('.inline').modaal({
    content_source: '#inline'
});

It is stupid to have <button class="inline">Show</button>

[MihaiSlujitoru]

I'm looking for similar functionality. Did you figure it out?

[hoangemini]

I'm looking for similar functionality. Did you figure it out?

I tried to fix the source but it failed! I had to trigger the submit button to open the modal, which was silly

[pzi]

Have you tried

$('.inline').modaal({
    content_source: '#inline'
    start_open: true
});

as per the docs?

See: https://github.com/humaan/Modaal#32-programatically-open-a-modaal

[MihaiSlujitoru]

@pzi Yes, but I want to open the modal based on actions not when the website first loads. Something like they complete a form and then show up the modal if the form submits, as an example.

[pzi]

CodePen example of triggering the form on form submit: https://codepen.io/pzi/pen/MWKXgxg

HTML

<form>
  <label>
    Foo
    <input />
  </label>
  <button>Submit</button>
</form>

<div id="inline-content" class="trigger">...</div>

CSS

#inline-content {
  display: none;
}

JS

// init modaal
$(".trigger").modaal({ content_source: "#inline-content" });

$("form").on("submit", (event) => {
  event.preventDefault();
  // open modaal on submit
  $(".trigger").modaal("open");
});

Disclaimer: haven't used Modaal that much, so unsure if the "trigger" being on the same as the modaal content is legit, but it seems to work. Can always chuck the trigger class on another element if it's an issue.