CODEWITHSUNDEEP
javascriptjqueryhtmlwordpress
Patrick
Patrick

Reputation: 159

Popup up when button is clicked

I have a join button with class join-button When I click on the button I want to receive an option to either join as member type A or member type B and then link to the correct page. Could I please get some help tackling this feature? Should I use ajax?

<?php if ( !is_user_logged_in() ): ?>
    <a href="www.domain.com" class="join-button">Join</a>
<?php endif; ?>

css:

.join-button {
   -moz-box-shadow:inset 0px 1px 0px 0px #f5840c;
    -webkit-box-shadow:inset 0px 1px 0px 0px #f5840c;
    box-shadow:inset 0px 1px 0px 0px #f5840c;
    background-color:#f5840c;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #f5840c;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:14px;
    font-weight:bold;
    padding: 1px 4px;
    text-decoration:none;
    text-shadow:1px 1px 0px #f5840c;
}

Upvotes: 0

Views: 87

Answers (2)

Hussain Akhtar Wahid &#39;Ghouri&#39;
Hussain Akhtar Wahid &#39;Ghouri&#39;

Reputation: 6617

just use jquery UI plugin which you can download from here

  <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
<body>
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>

for better documentation and demos visit this link and search the demos for dialog

Upvotes: 1

Prabhakaran Parthipan
Prabhakaran Parthipan

Reputation: 4273

user Jquery UI plugin here is the fiddle

    $("button.joinbutton").on("click", function () {


  $( "#dialog" ).dialog();
    });

Upvotes: 0

Related Questions