Right now, I'm using this in a Bootstrap modal to redirect to a site:
click
I want the modal to be closed once the link has been clicked, so I thought adding data-dismiss="modal" to the tag would work, however it causes the modal to close without the link being opened.
Can I combine these and make the modal close after the URL opens?
This works for me and doesn't require extra script tags:
click
in boostrap 4 :
click
Add one id to anchor tag. Then you can close the modal using that id once it get clicked.
click
<script>
$("a#sample").click(function(){
$('#myModal').modal('hide')
});
</script>
This worked for me.
<a onclick="location.href='http://www.example.com/';" data-dismiss="modal">click</a>
something like the following should do it
$('a').click(function(){
$('modal-selector').modal('hide')
})
You can use the already existing class in your element:
class="modal-close"
I added this code to whole project
$(document).on('click', '.modal-hide-continue', function (e){
$(this).closest('.modal').modal('hide');
});
and it automatically works on any element with class name modal-hide-continue inside the modal.
Related
Hey I have a div which is wrapped by a Link component, and inside that div I have more buttons, but the problem is, when I click on the inner smaller buttons, I actually click on the Link component as well, so I get redirected which is not what I want... How do I fix this?
it seems as though both the link and the button get clicked but if i am intending to click the button only i want to avoid the parent link.
What I mean is, the Link is used to navigate to some URL when you click on it. Putting elements inside that for other tasks. like a blog post, you click on the parent it will redirect you, but on the child the button will allow you to delete it
was coding this in nodejs react so i was using onClick events
example
<Link to="/blog-post">
<div className="link-post-container">
...blog
<button className='deleteButton'></button>
</div>
</Link>
I have tried event.stopPropagation on the button but it still doesn't seem to do anything. Is it because the Link is an href instead of a onClick?
SOLUTION
so using some of the possible solutions below i started messing around and noticed by in the onClick of the deleteButton, if i add the following in, it works:
event.preventDefault()
with this, the redirect because of the href does not occur anymore and only the button click event will take place
const handleClick = event => {
event.stopPropagation()
// then write rest of your onclick code
}
<button className='deleteButton' onClick={handleClick}></button>
The click event propagates from the button upwards in the DOM tree until it reaches the root (simplified explanation - you can learn more about event propagation here). This is why the link also registers it and runs its onclick handler, redirecting you to another site.
You can call event.stopPropagation() inside your button's onClick handler to stop the event from reaching the encapsulating link.
source
I am using the materialize modal function from http://materializecss.com/modals.html
I cannot get the modal to pop up
I am using the following code:
http://pastebin.com/3L7G8vgK
Thanks in advance
jsbin demo. First you should add the class and id on anchor element for this to work like: <a class="modal-trigger" href="#modal1">Modal</a> . And your script which initializes modal should be located under the jquery and materialze js.
I'm using following code for just dialog box, Its working fine.. But how can I stop from redirecting the same page while clicking?
[?]
Thanks in advance...
add the # like so :
[?]
or remove href of link and set url in some custom attribute
onclick event of link, read url from custom attribute
text
You may try this:
$(document).on('click', '.click', function(e){
e.preventDefault();
e.stopImmediatePropagation();
return false;
});
JSFIDDLE
If you don't want to link anywhere: Don't use a link in the first place.
<span title = "this is some text">[?]</span>
(If you are creating something to click on (which triggers JS) then use a <button>).
I wonder if someone can guide me on how to remove the url label that appears at the bottom of the page when you hover over an anchor (I wonder if it's even posible). I've googled a lot and didn't find any answers.
Suppose I have
<a href="www.somepage.com" title="The Page">Link< /a>
in the bottom of the page there will appear a tooltip/label showing "www.somepage.com".
Please see here for an example
Thanks in advance!
You can use either Javascript or JQuery.
For example, you can set to A attribute "href=#" and add an attribute url=www.somepage.com something like this:
Link
If you click over this nothing happen.
Now, you need to apply with javascript or JQuery click event. The next example is using JQuery and Javascript:
At the bottom of page's body:
<script>
$('#link').click(function() {
var url = $(this).attr('url');
window.location.href=url;
});
</script>
I am trying to make a button in a Modal take you to a new page but It wont change page.
Here is a pastebin for the whole lot - http://pastebin.com/2TBgYpbv
but the problem is this code here -
<button href="manager.php?staffname=<?php echo"$staffname";?>&ban=true" class="btn btn-primary">Confirm</button>
Please explain why it's not redirecting
Thanks in advance.
Change the button to an anchor. Keep the css classes etc. Or, add a button click handler to change window.location. I suggest the first option.
The button tag does not have an href attribute. Read more about button on w3schools