kamriyas Posted June 28, 2013 Share Posted June 28, 2013 Sorry, I am a newbie. and I need a simple help. I am trying to create an alert box.. something like this // <FORM><INPUT TYPE="button" style=" background-color:#660099; color:#FFFFFF;" onfocus="this.blur()" VALUE="FANCY BUTTON"onClick='alert("- text goes here ")'> </FORM> // It works for texts but when I want to use something like this <FORM><INPUT TYPE="button" style=" background-color:#660099; color:#FFFFFF;" onfocus="this.blur()" VALUE="FANCY BUTTON" </FORM> Thank you Link to comment Share on other sites More sharing options...
Ingolme Posted June 28, 2013 Share Posted June 28, 2013 I think something's missing in your post, but I assume what you mean is that you want to be able to have images and other content in the popup box. The alert() function can't do that, it's just for text. What most developers do is create an HTML element and use CSS to place it in front of the page to make it look like a dialog box. It's a bit more complex so you need a moderate level of Javascript knowledge. Since this is so common there are probably libraries built that do this for you already. I don't know any particular one, maybe jQuery has one implemented. Searching for "modal dialog javascript" on a search engine will probably find some of them. Link to comment Share on other sites More sharing options...
kamriyas Posted June 28, 2013 Author Share Posted June 28, 2013 (edited) Thanks for your response Ingolme..I want to show a code something likeahref link ( It is not showing here )instead of textWhen someone click the button it should show a ahref code.Can it be done? Edited June 28, 2013 by kamriyas Link to comment Share on other sites More sharing options...
thescientist Posted June 28, 2013 Share Posted June 28, 2013 as he said, yes it can, with a moderate amount of JS experience/knowledge. what have tried/done Did you google for modal dialog boxes? Its not too hard on your own if you want to try that route, depending on your skill level. If you find something specific you need help with, like implementing one, feel free to provide code and what part you are stuck with. Link to comment Share on other sites More sharing options...
kamriyas Posted June 28, 2013 Author Share Posted June 28, 2013 Thanks for your help thescientist Well, I just want to use this below form button, but instead of text, i want to show an ahref code. <FORM><INPUT TYPE="button" style=" background-color:#660099; color:#FFFFFF;" onfocus="this.blur()" VALUE="FANCY BUTTON"onClick='alert("- text goes here ")'> </FORM> Link to comment Share on other sites More sharing options...
justsomeguy Posted June 28, 2013 Share Posted June 28, 2013 That sounds great. You can put whatever you want in the alert (as long as quotes are escaped correctly), but you need to keep in mind that alert boxes do not render HTML code. The alert box will show the actual HTML code, it will not show a link. If you want to show a link then you can't use an alert box, you need to use one of the methods that other people told you to use. Link to comment Share on other sites More sharing options...
jeffman Posted June 28, 2013 Share Posted June 28, 2013 You know, people really hate alerts. Have you considered another way to do the same thing? Would you like it if the user clicked the button and the href or link "magically" appeared somewhere in the form? Link to comment Share on other sites More sharing options...
kamriyas Posted June 28, 2013 Author Share Posted June 28, 2013 I am trying to create a button, clicking that button should show a ahref code. It can be an alert box or a new window or a new page. But it is difficult to cretae a new page because there will be like 10 buttons (each button with a unique ahref code.) Creating new pages, for each button is difficult. Link to comment Share on other sites More sharing options...
thescientist Posted June 28, 2013 Share Posted June 28, 2013 (edited) im still not sure what you mean by showing an href? You mean like a link to share so someone can copy/paste a link? either way, if done properly, you don't need to make multiples of anything. This is something simple highlighting that concept, although I'm not sure if it's actually what you're looking for, but could be used as a stepping stone. <!DOCTYPE html><html><head><title>Reusable AlertBox Demo</title> <script type="text/javascript"> function showAlert(href){ alert(href); }; </script></head><body> <button onclick="showAlert('www.google.com')">Link 1</button> <button onclick="showAlert('www.yahoo.com')">Link 2</button> <button onclick="showAlert('www.bing.com')">Link 3</button></body></html> Edited June 28, 2013 by thescientist Link to comment Share on other sites More sharing options...
justsomeguy Posted June 28, 2013 Share Posted June 28, 2013 <INPUT TYPE="button" style=" background-color:#660099; color:#FFFFFF;" onfocus="this.blur()" VALUE="FANCY BUTTON"onClick='alert("<a href="http://www.google.com/">Google</a>")'> Link to comment Share on other sites More sharing options...
kamriyas Posted June 28, 2013 Author Share Posted June 28, 2013 This is what exactly I am looking for <INPUT TYPE="button" style=" background-color:#660099; color:#FFFFFF;" onfocus="this.blur()" VALUE="FANCY BUTTON"onClick='alert("<a href="http://www.google.com/">Google</a>")'> Thanks alot justsomeguy You are awesome Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now