How to Open Modal Dialog with a button?

To manually trigger the dialog opening through a link or button, set the “Number of times to display Modal Dialog” to 0. Then, use code like this on the page where you want to show a link to open the dialog:

Click here to open dialog

<script type=”text/javascript”>

function openDialog() {

jQuery(“a#inline”).trigger(‘click’)

}

</script>

In this case, the trigger to open the dialog is a text link but it could also be a button. Let me know if this works for you and mark the issue as resolved if it does.

FYI I get an error message when I click my link:

“The requested content cannot be loaded.
Please try again later.”

I’m implementing to show up on first session view, AS WELL AS when a user clicks a button. Any idea what could be going wrong?

Thanks!

Yannick Lefebvre,

To manually trigger the dialog opening through a link or button, set the “Number of times to display Modal Dialog” to 0. Then, use code like this on the page where you want to show a link to open the dialog:

Click here to open dialog

<script type=”text/javascript”>

function openDialog() {

jQuery(“a#inline”).trigger(‘click’)

}

</script>

In this case, the trigger to open the dialog is a text link but it could also be a button. Let me know if this works for you and mark the issue as resolved if it does.

The situation is as follows:
I would like to open a Modal Dialog with a command of a button, you explained above, however I need to use this method for over a Modal Dialog, example: In a gallery I will display several pictures of photographic books, and each gallery a single photographic book would put a button “click here to view this book” that opened the Modal Dialog that photographic book which loads an html external, ie the photographic book. Do not know if understood well, do not know if the Google translation I made is consistent.
Please explain to me how I would use the above code, I insert it directly into a post?
Thank you, Janeislan Barbosa, Brazil.

Hi Janeislan, Yes, I do understand what you want to do. However, Modal Dialog will not fit the bill as it can only create a single dialog on a page. You cannot have different dialogs come up with different content when you click on different button for each of the books.

What you are looking for can be done with direct jQuery/javascript coding, but is not what the point of Modal Dialog is. Sorry.

himynameisvan, what type of content did you select? An external web page? Can you give me a link to the site via my web site @ ylefebvre.ca.

Hello – I am having the same problem actually.
I have a page https://jacksonpark.ca/ that has a text link for users to click on to open your modal window.
I changed the link to <a href="#" id="inline" title="Learn More"></a>
But when I add that id=”inline” to the link the following message is displayed when the modal box is opened …

“The requested content cannot be loaded.
Please try again later.”

If I remove the ID then the modal box will open but just not user click controlled.

Can you please help me fix this.

Clearly I don’t have a clue what I need to do to get this to work. After doing some research it seemed to me that all I needed to do was to change my link to ….

<a href="#inline" onclick="return false;" title="Learn More"></a>

But that did not work. Then I tried

<a href="#" onclick="openDialog();" title="Learn More"></a>

‘function openDialog() {
jQuery(“a#inline”).trigger(‘click’);
}’

But that did not work either. I am still stumped.

I think my issue was simply a jquery thing ..
In the end this worked …

<a title="Learn More" id="openmodal" href="#"></a>

<script>
jQuery(document).ready(function() {

	jQuery('a#openmodal').click(function() {
	    jQuery("a#inline").trigger('click');
	});

});
</script>

But now I have a different problem …

After closing the modal window the content is gone. How can a person open the same window again with a click?