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?
Related
I am looking for a way to inject HTML into an already loaded page in response to a user clicking the page.
Precisely, what I need to do is:
Capture a click
Generate a HTML string to be displayed
Inject that HTML string into the page, to be displayed on top of the current markup.
Of these, 1 is done and 2 is partially complete, so now I need to display the HTML string on top of the current markup (like a pop-up box). The injected markup should disappear when the markup behind it is clicked. How can I do this?
This is being developed as a feature of an Angular2 web app, so I'd like to achieve this using only typescript, HTML and CSS for styling, rather than use an existing library.
A few pointers to make things a little clearer:
Generated HTML will be interactive, so it may be clicked on, not just a simple popup or alert.
Generated HTML should be removed from the DOM when an area outside of that HTML is clicked.
If you log in to mymsn, you are able to customize the content and layout of your webpage. What I want to know is what kind of container are they using? Do they use an html element, or is it javascript or something else?
There are a bunch of boxes with a title, menu option, and minimize and delete buttons. Inside the boxes are unordered list links to topics of that particular subject.
Since I don't have 10 reputation I can't post an image of what it looks like.
If you look at the source code, you can see that this is just HTML elements like div used as containers for all the news dynamically added via JavaScript.
Check it by right clicking on any element in the page and select inspect element, you will see all the scripts running the page and handling interactions.
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.
I have a lot of experience in Swing and WPF but not much in Javascript. I am learning as I go. The below is what I would like to do
Have a single HTML Page for End User
Preload Dialogs which will be displayed in response to user action
Currently I have all the divs for the dialog boxes load as part of the document and then in the document $(document).ready() function I call hide().
I then open and close them. All this works currently. However I have the following problems:
The divs sometimes momentarily appear on page load
It annoys me that all these dialogs that are not part of the index page have to be loaded as part of the index page. (I am a little OCD with Code Organization).
Thanks-in-advance,
Guido
You could start the dialog box divs off with a style attribute set to:
style="display:none;"
Which is what jQuery does when it calls .hide(), then you wont have to wait for jquery to be ready before the element is hidden, the CSS will automatically do it for you
The jQueryUI Dialog will ease your display issues. I've found it to be more stable than anything I could write myself. You can, using AJAX, load content dynamically and put that markup into a single dialog DIV. It's as simple as knowing the DIV's ID, setting the html based on the AJAX response and then calling .dialog() on the popup.
I am having some trouble with getting jquery to recognize classes/ids of content that has been loaded into a dialogue box. All the jquery code (including the code that deals with the as yet unloaded classes) is loaded before the dialogue box is created, however the html that eventually goes into the dialogue box is created on the fly. I know it is going to get certain classes but don't know the rest of the code/content hence the reason I am loading it from the database. If I put the html on the page with the clickable class rather than the dialogue box it works, but I obviously don't want to do that. I was thinking this is a DOM problem since the class that jquery is going to be listening for is not on the page until AFTER the dialogue box is created (the dialogue box itself is also created by a click on another item - this has to happen this way as people may or may not want to get the dialogue box with the info from the database in it up). Any help in explaining and possibly finding a solution for this is much appreciated.
Have a look at jQuery.live().