WordPress.org

Ready to get started?Download WordPress

Forums

Modal Dialog
How to Open Modal Dialog with a button? (9 posts)

  1. janeislan
    Member
    Posted 6 months ago #

    Hello, I would like to know how can I do to open the Modal Dialog with a button. For example, in a particular post I put a button that when clicked will open the Modal Dialog referenced. Thank you.

    Janeislan Barbosa, Brazil.

    http://wordpress.org/plugins/modal-dialog/

  2. Yannick Lefebvre
    Member
    Plugin Author

    Posted 6 months ago #

    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.

  3. himynameisvan
    Member
    Posted 5 months ago #

    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!

  4. janeislan
    Member
    Posted 5 months ago #

    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.

  5. Yannick Lefebvre
    Member
    Plugin Author

    Posted 5 months ago #

    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.

  6. Yannick Lefebvre
    Member
    Plugin Author

    Posted 5 months ago #

    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.

  7. kingrobb
    Member
    Posted 3 months ago #

    Hello - I am having the same problem actually.
    I have a page http://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.

  8. kingrobb
    Member
    Posted 3 months ago #

    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.

  9. kingrobb
    Member
    Posted 3 months ago #

    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?

Reply

You must log in to post.

About this Plugin

About this Topic