I have 140 link items that essentially are going to do a modal window of a user profile for each link. I have created a div(the modal window) and styled it but the problem is that the elements on each user profile have to be different. So there is a div containing 3 images which are going to be different for everyone, a profile picture, a paragraph of text and social icons.
What would be the easiest way to make this work? Been looking for some information for couple of hours with no results.
Thank you.
Create a single blank modal (yes, one will do).
Everytime you display content to it, clear the body of the modal first
Load the content you want to display
Show the modal.
Do steps 2 to 4 everytime you want to show it with different content.
Related
So, my question is that I have to display a webpage in 2 different ways when I click on 2 different links. If I click link 1, the webpage I would like to display, will hide some content and display to the user. If I click link 2, the webpage will display in a default method. I know how to hide the content using JS and CSS. But how to make the other page know what to display? Should I send any unique variable to let it know, on what to display?
I have two webpages on my site that utilize the modalbox CSS/JS script.
This is the one that works:
http://www.miguelonenterprises.com/modalbox/modalboxtext.htm.
It's a pano image encased in a modal box script. That works just fine.
This is the one that doesn't work:
http://www.miguelonenterprises.com/modalbox/modalboxtext2.htm.
What I want to have this do is open two separate modal boxes containing two separate images.
Clicking the button beneath Modal Example will yield a modal box with no content.
Clicking the button beneath Modal Example2 will yield nothing.
I can manage through CSS and HTML just fine, but when it comes to Java Script I have no idea.
What I would like to see happen is, if possible, an HTML document and a separate CSS document.
Any suggestions on how to make modalboxtext2.htm work?
How do I make a slide show of text?
For exemple, on my “about” page (for my brand), I have three different points, but I don’t want to have them all together so I have three different parts (still in my “about” section) and when someone presses “continue” or “next”, a new point is switched out with the first one (still in the “about” sub page).
This has been answered here: Very Simple with Link Click Change the Content of a Div on a Single Page
Basically you want to use onclick events to toggle between versions of content for a div.
I have an angular/bootstrap app and the modal window of an app contains small textarea which can contain a lot of text that does not fit the size of textarea (and modal).
I would like to add some kind of button to the small modal window which would open new bigger popup/modal containing nicely formatted content of text area, like 90% of the screen.
I am not asking here for the code, but more like for the way how to approach the problem. I have already tried several approaches but I got stuck always.
Thanks a lot!
I would just use JavaScript to handle the click of your button to expand the modal size, by adding a class to your modal.
e.g. jQuery example:
$('.expand-modal').click(function() {
$('.modal').addClass('expanded');
});
And then just write some CSS for .modal.expanded where you ensure it's 90% of the screen size or whatever you want.
You would probably want another button to minimise the modal again, in which case you just do something like $('.modal').removeClass('expanded');
I have an image gallery with a bunch of photos. I have a next and previous buttons next to the image to navigate through the images (Only single image of the gallery is displayed on the page at a time).
On click of this 'next' and 'previous' buttons, the user should be able to navigate to next/ previous image respectively. I am not sure how this could be achieved.
I am new to web development and I am looking for a resource which would help me with the same. Any resource which could guide me through this would be helpful.
Thanks,
I would look at the Jquery library. (Jquery.com) or even some type of plugins. worst case scenario you can dynamically generate divs with unique IDS and then hide and show them based on the id with the buttons.