CSS-stylable popup (modal) that doesnt load until it is opened - javascript

so I'd like to build something like That.
Now I want to put a LOT of these buttons on a page and every popup must contain a different <iframe> (embedding videos). Also I'd liek them to be CSS-stylable.
So what I cant seem to achieve is two things:
- I cant find any script (I'm extremely new to web thingys) that will open DIFFERENT popups for different buttons
- I cant find something that lets the contents of the popups remain unloaded until they are actually displayed.
Thanks for any help!
PS: I only know how to use jS, HTML and CSS so I cant use fancy stuff... First project...
-edit-
Okay, i didnt know server-side things are related to this. I can use PHP (actually I'd populate the popups per PHP) so is there a way using the specified languages plus PHP? and if not, how can I achieve the other goal I specified? I have no idea of JS, I just know how to use scripts...

hope this link will help:
http://getbootstrap.com/javascript/#modals-related-target
plz recheck your data-target="#exampleModal" in button is the id of the modal and put iframe instead of this form in this link.

Related

How do I dynamically create a hyperlink in asp c#?

I don't have code for this, as everything I have checked does not help me.
I am merely asking whether it's possible to do what I am trying to do.
I am creating a news article website. On the create page, on button click to create, a new aspx page is generated.
"Project/Articles/(todays date folder)/newarticle.aspx" is the generated path.
The create page is "Project/Create.aspx"
What I am trying to do is create a link to the newly generated article on the homepage.
"Projects/HomePage.aspx"
I want to know if it is possible to do this, even if I need to use Javascript/jquery for it.
I've gone through dozens upon dozens of help articles and forums to find my answer, but the best I could find is generating a link on the same page.
All of this is done with webforms.

How do i hide my wordpress site page source like (bczcentral.com)?

Can i hide my wordpress blog site's page source like this? I have to ask this question because there are many plugins which can disable page source and right-click. but after typing manually "view-source:url" in browser it instantly shows the source-code of wordpress site.If any body knows answer please write down . this is very important for all bloggers 'I think' .
TLDR: No, you can never hide the soure code of your page. There is NO way.
For a browser to render a web site you need to send it the HTML, CSS, and javascript code. Even though you can make it "harder" to see the code by disabling right click, anyone with just a little bit of understanding of the web will be able to read it easily (F12 in most browsers).
As a website designer it is important for you to understand this concept as it is very important in deciding on how to design your web site. Things the user should not see need to happen on the server side (where no user can reach it). Only things which dont matter if anyone can see should be sent to the user.
I think you cannot hide the whole code. Or do you want to hide a specific part of the code? For example, you can hide/encrypt the URL of an iframe in which you can display more sensitive content. However, I also don't really know how to do it in WordPress (I searched for a solution many times) but I heard it's possible.
I'm curious what about the answers.
I wouldn't even consider doing this. Not only does it ruin the end-user's experience, it can actually stop people with disability copying text from your site or using other right-click menu items.
You can't hide your code, but you can obfuscate some of it.
CSS Obfuscater.
JSS Obfuscater.

Javascript: Redirecting to another site through a popup

I'm quite bad with Javascript and I can't work out a solution I need help to. I'm having a website and I'm trying to make a redirection to another site, but through a popup.
Example :
<script>alert(This will prompt up the message)</scrip>
<script>window.location="http://This-will-redirect-me-to-another-link.com";</scrip>
Like you can see I could simply use the second javascript to redirect the persons to another page, but due some reasons I can't use it as it will work only for half of the page(the script would be kinda 'sandboxed'), but if I'd make a popup(the first alert script) the second script would get out of the 'sandbox'. Is there anyone who has any ideas how I should implement this or can it be done otherwise with PHP or HTML?
I'm having a MyBB forum and there's a shoutbox for it which I'm using. There's a command which will change the notice of the shoutbox and the command is as such /notice New notice | But I noted that the new notice can be changed with javascript and it'll work such as /notice js code here | Then I thought that what if I would make such a javascript that would redirect people to another webpage. As I'm having such a forum where it's needed to redirect from the main page to another one, I'd like to apply it. Then Staffs could do it in the forum very well, but there's a problem. by adding
/notice window.location="http://This-will-redirect-me-to-another-link.com";
It'll affect only the shoutbox and shoutbox is being redirected to another webpage, but as an alert works for the whole forum I thought maybe I can redirect them to somewhere else with the alert. I want to know is it possible with just one script then Staffs would be able to do it. I know it's a serious security risk & it can be otherwise also, but I'd really like to experiment with it.
I hope someone can help. :)
Try:
window.open('url to other site', 'window name', 'width=900,height=650,scrollbars=yes');
If I understand you (if not please correct me), you can put a tag on popup or another place:
<a href="http://another.site.com/"
onclick="return confirm('Do you want to see another page?');">Redirect</a>

Using javascript to load new HTML segment inside page

I know this is a problem I could solve with a huge list in "innerHTML", but there's got to be a better way.
I'm making a webpage with a "search" and "browse" section, both are big buttons at the top of the index page. I have search.html and browse.html, but I want their contents to load in my "main" div on the index page rather than open their own pages. I should be able to quickly click between "search" and "browse" and have their different pages load back and forth inside the index page. Hopefully that makes sense. I was trying a solution with frames before, but it wasn't working for me.
Any advice would be greatly appreciated.
Thanks!
You can use tabs or something like that: http://jqueryui.com/demos/tabs/
Most JavaScript AJAX libraries such as jQuery have this built-in - in case of jQuery the load method.
However keep in mind, "tricks" like this destroys the browser usability for your users (broken back button, not possible to set bookmarks, etc.). It's possible to work around, but that makes extra work.

Un-obtrusive modal window in external site

Sorry for the title.....bit difficult to word what I really want to ask.
Some websites allow a user to copy and paste some widget for use with their own site. For example, getsatisfaction. Yes, those feedback icons that I hope most of you see in various places.
If you have a look at twitterfeed, on the left there will be a feedback icon, once clicked on a nice modal window comes up. the modal windows content is in an iframe to an external source.
I really like this, but my question is:
I could do the same by using some jQuery library for the modal window and then linking the modal content to a site on my page, but how do I stop this from becoming obtrusive to a sites other javascript files?
For example, let's say i'm using my js code and the relevant jquery code, and i've minified it into one file. The user adds my widget to their site. If they're using jQuery, how do I make sure my code isn't going to interfere with theirs?
Would the best way be to use a modal window library which is not very popular?
Thanks very much. Hope that makes sense!
EDIT: I could write my own modal window functionality code, but i'd much rather use a library which already does it.
You can dynamically load jQuery only if it is needed.
First check for the existance of the jQuery object. If not add the script tag.
There are some challenges to this, as there is no onload event when adding a script tag to a page, that works consistently accross browsers, so you will have to poll to see if it fully loaded, and only then run your code.
There is an article on how to do this:
http://www.squidoo.com/load-jQuery-dynamically
You may still have an issue if the user has a differnt version of the jquery library though, although you can probably get around this with some additional checks.
jQuery UI has very nice dialog components that should fit your purpose. Inside them you can instantiate an iframe. see:
http://elijahmanor.com/demos/jqueryuidialogiframe/index.html
If I understand all this correctly, the iframe content is a separate page, so there is no case where your javascript code in that page would interfere with the javascript of the calling page, but maybe I haven't understood that part correctly?
EDIT:
I think I understand what you meant, in that you want to package up the code that you will write that opens the modal window with the iframe. SO you want to make sure that this code does not interfere with existing jQuery code that the user is using.
I think this is a good use case for a jQuery plugin. This way the user of the page can use your function like any jQuery function, so less likelyhood of collisions

Categories