[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 610
  • Last Modified:

Javascript Function Help with onclick/onfocus prompt

Hi, I've made a Javascript function that gives a prompt, though is there anyway that if a user clicks on the Subject, the contents of it disappears?
<script language="javascript">
function Test(){
	var ok = prompt("Title", "Subject");
	if (ok){
		window.location = "?root=main" + ok;
	}else{
		return false;
	}
}
</script>

Open in new window

0
eNarc
Asked:
eNarc
1 Solution
 
cyberkiwiCommented:
Not with a native "prompt", but you could achieve it with a div overlay and an input control and some buttons.
0
 
JtRCommented:
why using that ugly prompt (i already forgot that this function exists in javascript) ;D

make a fancy div based form or open a new window which you can control!
0
 
eNarcAuthor Commented:
what should I use and how would I go about achieving this? would anyone provide an example function?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
flexiwebswCommented:
You could implement a simple blackout script with a popup div.

you can find an example for what you need below.

<head>
<style type="text/css">
body{
      z-index: 0;
}
#outer {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0px;
      display: none;
      z-index: 90;
}
.popup {
      display: none;
      position: relative;
      background-color:#FFF;
      width: 300px;
      height: 100px;
      z-index: 100;
      margin: auto;
}
#popuptitle {
      color: #FFF;
      background-color:#0CF;
      font-weight: bold;
      height: 20px;
      text-align: center;
}
.popupbody {
      padding-top: 10px;
      padding-bottom: 10px;
      color: #FFF;
      text-align: center;
}

</style>
<script type="text/javascript">

 function addEvent(obj ,evt, fnc)
      {
        if (obj.addEventListener)
          obj.addEventListener(evt,fnc,false);
        else if (obj.attachEvent)
          obj.attachEvent('on'+evt,fnc);
        else
          return false;
        return true;
      }

      function removeEvent(obj ,evt, fnc)
      {
        if (obj.removeEventListener)
          obj.removeEventListener(evt,fnc,false);
        else if (obj.detachEvent)
          obj.detachEvent('on'+evt,fnc);
        else
          return false;
        return true;
      }


      //----------

      function appendElement(node,tag,id,htm)
      {
        var ne = document.createElement(tag);
        if(id) ne.id = id;
        if(htm) ne.innerHTML = htm;
        node.appendChild(ne);
      }
     
        
        //----------
        

      function showPopup(p, o)
      {
        scroll(0,0);
              if (document.all)
            {              
                document.body.scroll = "no";
            }
            else
            {
                var oTop = document.body.scrollTop;
                document.body.style.overflow = "hidden";
                document.body.scrollTop = oTop;
            }
            greyout(true);
        document.getElementById(p).style.display = 'block';
            document.getElementById(o).style.display = 'inline';
      }

      function hidePopup(p, o)
      {
        greyout(false);
             document.body.scroll = "";
            document.body.style.overflow = "";
        document.getElementById(p).style.display = 'none';
            document.getElementById(o).style.display = 'none';
      }

      //----------
      function greyout(d,z)
      {
        var obj = document.getElementById('greyout');
        if(!obj)
        {
          appendElement(document.body,'div','greyout');
          obj = document.getElementById('greyout');
          obj.style.position = 'absolute';
              obj.style.height = '100%';
              obj.style.width = '100%';
              obj.style.position = 'fixed';
          obj.style.top = '0px';
          obj.style.left = '0px';
          obj.style.background = '#111';
          obj.style.opacity = '.5';
          obj.style.filter = 'alpha(opacity=50)';
        }
        if(d)
        {
          if(!z){ z - 50 }
          obj.style.zIndex = 50;
              obj.style.height = '100%';
              obj.style.width = '100%';
          obj.style.display = 'block';
          addEvent(window,'resize',greyoutResize);
        }
        else
        {
          obj.style.display = 'none';    
          removeEvent(window,'resize',greyoutResize);
        }
      }


      function greyoutResize()
      {
        var obj = document.getElementById('greyout');
        obj.style.height = '100%';
        obj.style.width  = '100%';
      }

</script>
</head>
<body>
<script language="javascript">
function test(){
      hidePopup('popup', 'outer');
            window.location = "?root=main" + document.getElementById('popuptext').value;
}
function test2(title, subject){
      document.getElementById('popuptitle').innerHTML = title;
      document.getElementById('popuptext').value = subject;
      var w = window.innerHeight / 2;
      document.getElementById('popup').style.marginTop = w - 50 + 'px';
      showPopup('popup', 'outer');
}
function clr(id){
      document.getElementById(id).value = '';
}
</script>
<div id="outer">
<div id="popup" class="popup">
<div id="popuptitle"></div>
<div class="popupbody">
<input type="text" id="popuptext" value="" onfocus="clr('popuptext')" onclick="clr('popuptext')" />
<br/><br/>
<input type="button" name="ok" id="ok" value="OK" onclick="test()" />
<input type="button" value="Cancel" onclick="hidePopup('popup', 'outer');" />
</div>
</div>
</div>
<a onclick="test2('My Title', 'My Subject')">test</a>
</body>
</html>


<head>
<style type="text/css">
body{
	z-index: 0;
}
#outer {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	display: none;
	z-index: 90;
}
.popup {
	display: none;
	position: relative;
	background-color:#FFF;
	width: 300px;
	height: 100px;
	z-index: 100;
	margin: auto;
}
#popuptitle {
	color: #FFF;
	background-color:#0CF;
	font-weight: bold;
	height: 20px;
	text-align: center;
}
.popupbody {
	padding-top: 10px;
	padding-bottom: 10px;
	color: #FFF;
	text-align: center;
}

</style>
<script type="text/javascript">

 function addEvent(obj ,evt, fnc)
      {
        if (obj.addEventListener)
          obj.addEventListener(evt,fnc,false);
        else if (obj.attachEvent)
          obj.attachEvent('on'+evt,fnc);
        else
          return false;
        return true;
      }

      function removeEvent(obj ,evt, fnc)
      {
        if (obj.removeEventListener)
          obj.removeEventListener(evt,fnc,false);
        else if (obj.detachEvent)
          obj.detachEvent('on'+evt,fnc);
        else
          return false;
        return true;
      }


      //----------

      function appendElement(node,tag,id,htm)
      {
        var ne = document.createElement(tag);
        if(id) ne.id = id;
        if(htm) ne.innerHTML = htm;
        node.appendChild(ne);
      }
      
	  
	  //----------
	  

      function showPopup(p, o)
      {
        scroll(0,0);
		  if (document.all)
            {               
                document.body.scroll = "no";
            }
            else
            {
                var oTop = document.body.scrollTop;
                document.body.style.overflow = "hidden";
                document.body.scrollTop = oTop;
            }
		greyout(true);
        document.getElementById(p).style.display = 'block';
		document.getElementById(o).style.display = 'inline';
      }

      function hidePopup(p, o)
      {
        greyout(false);
		 document.body.scroll = "";
            document.body.style.overflow = "";
        document.getElementById(p).style.display = 'none';
		document.getElementById(o).style.display = 'none';
      }

      //----------
      function greyout(d,z)
      {
        var obj = document.getElementById('greyout');
        if(!obj)
        {
          appendElement(document.body,'div','greyout');
          obj = document.getElementById('greyout');
          obj.style.position = 'absolute';
		  obj.style.height = '100%';
		  obj.style.width = '100%';
		  obj.style.position = 'fixed';
          obj.style.top = '0px';
          obj.style.left = '0px';
          obj.style.background = '#111';
          obj.style.opacity = '.5';
          obj.style.filter = 'alpha(opacity=50)';
        }
        if(d)
        {
          if(!z){ z - 50 }
          obj.style.zIndex = 50;
		  obj.style.height = '100%';
		  obj.style.width = '100%';
          obj.style.display = 'block';
          addEvent(window,'resize',greyoutResize);
        }
        else
        {
          obj.style.display = 'none';    
          removeEvent(window,'resize',greyoutResize);
        }
      }


      function greyoutResize()
      {
        var obj = document.getElementById('greyout');
        obj.style.height = '100%';
        obj.style.width  = '100%';
      }

</script>
</head>
<body>
<script language="javascript">
function test(){
	hidePopup('popup', 'outer');
		window.location = "?root=main" + document.getElementById('popuptext').value;
}
function test2(title, subject){
	document.getElementById('popuptitle').innerHTML = title;
	document.getElementById('popuptext').value = subject;
	var w = window.innerHeight / 2;
	document.getElementById('popup').style.marginTop = w - 50 + 'px';
	showPopup('popup', 'outer');
}
function clr(id){
	document.getElementById(id).value = '';
}
</script>
<div id="outer">
<div id="popup" class="popup">
<div id="popuptitle"></div>
<div class="popupbody">
<input type="text" id="popuptext" value="" onfocus="clr('popuptext')" onclick="clr('popuptext')" />
<br/><br/>
<input type="button" name="ok" id="ok" value="OK" onclick="test()" />
<input type="button" value="Cancel" onclick="hidePopup('popup', 'outer');" />
</div>
</div>
</div>
<a onclick="test2('My Title', 'My Subject')">test</a>
</body>
</html>

Open in new window

0
 
eNarcAuthor Commented:
that is very fancy, I like it allot, thankyou.
0
 
flexiwebswCommented:
You are more than welcome.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now