javascript - Implement greybox in web applications

241

I am trying to have agreybox pop up in a web applications.

So I googled it and I found some codes and added it to the php page as shown below

<script type="text/javascript">
 var GB_ROOT_DIR = "../I/greybox/";
</script>

<script type="text/javascript" src="../I/greybox/AJS.js"></script>
<script type="text/javascript" src="../I/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="../I/greybox/gb_scripts.js"></script>
<link href="../I/greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />

<td align="center">
 <a href ="http://google.com/" title="Google" rel="gb_page_center[640, 480]">
   <i title="Edit"  onClick=""></i>
 </a>
</td>

But when I click the link its opening in the new window. Any suggestions appreciated.

I have all the js and css files stored inside../I/greybox which are mentioned above.

602

Answer

Solution:

  • 1st possible solution: onClick="function(e) {e.preventDefault();}"
  • 2nd possible solution: Do it youself. Example

$('.openForm').click(function() {
    $('.popup').addClass('visible');
});
$('.closeForm').click(function() {
    $('.popup').removeClass('visible');
});
$('form').submit(function(ev) {
    ev.preventDefault();
    $('.popup').removeClass('visible');
    var email = $('.popup .form #email').val(),
        message = $('.popup .form #message').val(),
        text = 
        '<h3>Message</h3><b>from: </b>' + email + '<br><b>text: </b>' + message;
    $('#testresponse').html(text);
});
.openForm {
    color:blue;
    cursor:pointer;
}

.popup {
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
}

.visible {
    display:block;
}

.popup .form {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    width:300px;
    height:200px;
    background:white;
    border:solid 1px #ddd;
}

.popup .closeForm {
    position:absolute;
    top:0;
    right:0;
    cursor:pointer;
    color:#ccc;
}

.popup .closeForm:hover {
    color:#000;
}
<div >Click Me</div>
<div id="testresponse"></div>
<div >
  <div >
    <div >X</div>
    <form action="" method="post">
      <input id="email" type="email" name="email" placeholder="Enter your E-Mail..." /><br />
      <textarea id="message"></textarea><br />
      <input type="submit" value="send" />
      
    </form>
  </div>
</div>



People are also looking for solutions to the problem: http failure during parsing for
Source

Share


Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.


Similar questions

Find the answer in similar questions on our website.

215 php - What's the best way to implement message queue on medium traffic website
559 php - How to get the website name based on whether the website supports http or https?
340 javascript - How do I make the website wait for my ajax file to send back a value instead of printing undefined?
933 php - Convert websites into mobile website format
976 javascript - SweetAlert implementation in Laravel
566 [PHP/JavaScript]: Call PHP file through JavaScript code with argument
521 web services - php and webservices
804 php - pull content from an external website generated by javascript
542 javascript - Allow access to website only at specific times?
551 javascript - how to redirect my /old/folder to /newfolder in htaccess

People are also looking for solutions to the problem: php - Url-rewriting with multiple parameters

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.