通过选择复选框动态创建弹出表单


Create popup form dynamically by selecting a checkbox

function msg()
{
  if (document.getElementById('c1').checked);
    alert("suggest an update");
  }
<input class="form-control" type="checkbox" id="c1" onclick="msg()" name="like"/>

您可以用不同的方式进行表单弹出,其中之一是使用jQuery

下面是一个执行您想要执行的操作的示例。

如果您使用Angularjs,我强烈建议您使用ngDialog。这是我最喜欢的弹出窗口类型。您只需创建一个包含弹出窗口内容的html文件,并在选中复选框后创建对话框的实例(您可以使用ngChange观察值的变化(

下面将生成一个带有一个文本输入元素的表单,很容易将其扩展为包括许多其他元素。不能给出任何jquery的例子,因为我不使用它。

    <script type='text/javascript' charset='utf-8'>
        function msg(e) {
            var id='bob';
            var el=e.target || e.srcElement;
            if( el.checked ){
                var cont=document.getElementsByTagName('body')[0];                  
                var form=addNode('form',{id:id},cont);
                    form.style.width='500px';
                    form.style.height='500px';
                    form.style.zIndex=10;
                    form.style.border='1px solid black';
                addNode('input',{type:'text',name:'fred'},form);
            }else{
                if( document.getElementById(id) ) document.getElementById(id).parentNode.removeChild( document.getElementById(id) );
            }
        }
        function addNode( t, a, p ) {
            var el = ( typeof( t )=='undefined' || t==null ) ? document.createElement( 'div' ) : document.createElement( t );
            for( var x in a ) if( a.hasOwnProperty( x ) && x!=='innerHTML' ) el.setAttribute( x, a[ x ] );
            if( a.hasOwnProperty('innerHTML') ) el.innerHTML=a.innerHTML;
            if( p!=null ) typeof( p )=='object' ? p.appendChild( el ) : document.getElementById( p ).appendChild( el );
            return el;
        }
/*
The addNode function:
First argument is the type of element you wish to add.
Second argument is an object literal containing properties for the element you wish to set.
Third argument is the parent node to which you wish to append the new element/node.
*/
    </script>

html
----
<input class="form-control" type="checkbox" id="c1" onclick="msg(event)" name="like"/>