I'm using a button to open a ajax html popup and a link onclick at the same time.
But the problem is I have several buttons placed on the page and with each button I want to open different links any help appreciated
Heres the html code
<a href="test.html" class="ajax-popup-link">
<button type="button" style="background:green;float:right;">
Activate
</button>
</a>
Heres the javascript function
<script src="../assets/jquery.magnific-popup.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.ajax-popup-link').magnificPopup({
type: 'ajax',
overflowY: 'scroll',
closeOnContentClick: false
});
$('.ajax-popup-link').click(function(){
window.open("/some-link.html");
});
});</script>
I have got the workaround anyway
here it is
<p onclick="window.open('http://google.com', '_new')"><a class="ajax-popup-link" href="test.html" style="top:-10px;left:650px;background:green;text-align:center;height:50px;">ACTIVATE DEAL</a></p>
In your click function, just reference the href attribute instead of hard coding the link. Also a good idea to prevent the browser's default behaviour on link click:
$('.ajax-popup-link').click(function(e){
e.preventDefault();
window.open($(this).attr("href"));
});
Related
Hello Folks both my buttons work when used individually, but when I use button A to click button B using Java script it does not work. I know button A works becuase the alert I added to the script pops up. But it won't invoke button B. I have tried it using classes and ID. Help Appriciated.
//Button A
<a class="send-btn"> <?php echo $buttontext?> </a>
//Button B
<a id="open-modal" class="openmodal-btn" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#modal">
// I have tried adding these in the js Script during testing.
$("#openmodal-btn").click();
$('.openmodal-btn').click();
<script>
$(document).ready(function(){
$('.send-btn').click(function(event){
$('.openmodal-btn').trigger('click');
});
});
</script>
Removing this link below which stood above all my Scripts at the bottom of the page resolved this issue as I had the same link duplicated in the page header.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
And thanks to Swati for helping with troubleshooting!
Can somebody tell me how to auto click the button in a page when it loads?
I've tried this code in javascript but it doesn't `work.
<a href="javascript:Clickheretoprint()" id="print">
<script type="text/javascript">
$(document).ready(function(){
$("#print").click();
});
</script>
is there any way to do this??
Please try following :
$("#print")[0].click();
The answer is from the following link :
Using jQuery to programmatically click an <a> link
I've read the documentation of Magnific Popup, included the files and just copied and pasted the code from the modal popup as per the following
JsFiddle
<a class="popup-modal" href="#test-modal">Open modal</a>
<div id="test-modal" class="mfp-hide white-popup-block">
<h1>Modal dialog</h1>
<p>You won't be able to dismiss this by usual means (escape or click button), but you can close it programatically based on user choices or actions.</p>
<p><a class="popup-modal-dismiss" href="#">Dismiss</a>
</p>
</div>
$(document).ready(function () {
$('.popup-modal').magnificPopup({
type: 'inline',
preloader: false,
focus: '#username',
modal: true
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
But this isn't working at all, what's wrong with the code above?
There's probably problem with your externally loaded CSS in your JsFiddle. Try to remove externally loaded css and paste the content into CSS tab.
i added a <a> tag in my page which refers to the jQuery fancybox():
<a class='iframe' href="someLink">sth</a>
<input type="button" value=".." onclick="javascript:history.go(-1)"/>
$(document).ready(function(){
$(".iframe").fancybox({
type: 'iframe',
showCloseButton: false,
'hideOnOverlayClick':true
});
});
the painful problem is: after i click the .iframe and then close the fancybox, the page cannot goback to the previous one immediately. i need to click twice!
yes, it is in chrome browser. but it works well in FX.
what is wrong with it?!
I want to use fancybox to popup a message if a certain button is clicked.
I want the fancybox message to only contain some text,
and a 'close' button, i dont mind using the default button if there is one.
can someone give an example of how it should be written in the html page and the js page?
any help will be much appreciated!
Assuming your button has an id of yourButton:
$("#yourButton").click(function () {
var content = $("<div>Hello<br /><br /></div>");
var button = $("<input type='button' value='Close Me!' />");
content.append(button);
$.fancybox({ content: content });
$(button).click(function () { $.fancybox.close(); });
});
This should be able to help you:
http://fancybox.net/howto
Once you have required all the relevant files, to hook it up to all linka, use this:
$("a").fancybox();
If the html is complicated enough you might prefer putting it in a hidden div as I've done below. This is a scaled down version of code I'm running on my site to do a fancybox dialog box. Works with FancyBox version 1.3.4 (I haven't upgrade to 2 yet). Personally, I like the default close button (circle X in top right corner) and even pressing Escape works, but I've added a custom close button to the popup. It includes javascript to close FancyBox.
<a id="mylink" href="#mypopup">link style button</a>
<div id="mybutton">button</div>
<div style="display:none">
<div id="mypopup">
<h1>My Title</h1>
<p>My Message</p>
<!--... other complex html can go here ...-->
<input type="button" onclick="$.fancybox.close();" value="Custom Close Button" />
</div>
</div>
<script type="text/javascript">
$('#mylink').fancybox();
$('#mybutton').click(function() {
$.fancybox({
'orig' : $(this),
'href' : '#mypopup'
})
});
</script>