Pop Up Form doesn't Work

Question

I need help in creating a pop up form. here is part of my html code & jquery code:

 <body id ="bdy" onclick = "check(event)" style="overflow:auto;">

 <div id="ric">

     <!-- Popup div starts here -->
 <div id="popupContact"> 

    <!-- contact us form -->
        <form action="#" method="post" id="form" >
            ...
        </form>
 </div> 
 <!-- Popup div ends here -->
 </div>
 <!-- display popup button -->
    <CENTER><h1>Click Button To Popup Form Using Javascript</h1>
            <button id = "popup" onclick ="div_show()">Popup</button></CENTER>

 </body>

and for the Jquery:

//function to display Popup
function div_show(){ 
document.getElementById('ric').style.display = "block";
}

//function to check target element
function check(e){ 
var target = (e && e.target) || (event && event.srcElement); 

var obj = document.getElementById('ric'); 
var obj2 = document.getElementById('popup'); 

checkParent(target)?obj.style.display='none':null; 
target==obj2?obj.style.display='block':null; 

} 

//function to check parent node and return result accordingly
function checkParent(t){ 
    while(t.parentNode){ 
        if(t==document.getElementById('ric'))
            { 
                return false 
            }
        else if(t==document.getElementById('close'))
            {
                return true
            } 
        t=t.parentNode 
    } 
    return true 
}

and this is a part of the css:

#ric{
width: 100%;
height: 100%;
opacity: 0.95;
top: 0;
left: 0;
display: none;
position: fixed;            
background-color: #313131;
overflow:auto;
}

The css above should hide the div, but when I run it, the div is still shown. Is there something wrong with my code? If you have other simple example of showing pop up form, please share it with me.

Please clarify your question ... – Neeraj Dubey Aug 25 '14 at 09:40 — Neeraj Dubey, Aug 25 '14 at 09:40
Don't use obsolete tags such as `` and ` – pid Aug 25 '14 at 09:48 — pid, Aug 25 '14 at 09:48

score 0 · Answer 1 · answered Aug 25 '14 at 09:44

0

when you change div id from 'abc' to 'ric', you should also change the name of css definition from 'abc' to 'ric'

answered Aug 25 '14 at 09:44

bizet

53
1
7

score 0 · Answer 2 · answered Aug 25 '14 at 09:49

Hey you can use like this

 $("#btnShowSimple").click(function (e)
  {
     ShowDialog(false);
     e.preventDefault();
  });

  $("#btnShowModal").click(function (e)
  {
     ShowDialog(true);
     e.preventDefault();
  });

  $("#btnClose").click(function (e)
  {
     HideDialog();
     e.preventDefault();
  });

Live Demo

Hope it helps you

score -1 · Answer 3 · edited May 23 '17 at 10:33

-1

Instead of writing onclick in HTML you can simply write onclick function in javascript/jQuery and it will work fine.

FIDDLE DEMO

$('#popup').click(function(){
   document.getElementById('ric').style.display = "block";
})

Check THIS link why you should not write onclick in HTML

edited May 23 '17 at 10:33

Community

1
1

answered Aug 25 '14 at 09:46

Richa

3,261
2
27
51

Pop Up Form doesn't Work

3 Answers3