通过按钮弹出表单 [英] Popup form from a button

问题描述

大家好，

我是AJAX和JQuery的新手.

在我的Web应用程序中，我占据了一页"MasterGroup.aspx".
在页面上，我有一个GridView，下面是一个按钮添加新组".

实际问题

我想将表单显示为具有后台页面的弹出表单处于非活动状态.
因此，我又创建了一个页面"AddGroup.aspx"，其中包含一个文本框和一个保存按钮.

但是我无法显示弹出窗口，也无法使后台页面无效.

请帮帮我.


在此先感谢.

Hello All,

I am new to AJAX and JQuery.

In my web-application I have taken one page "MasterGroup.aspx".
On the page I have one GridView and below I have one button "Add new group".

Actual Problem

I want to show the form as popup form with background page is in in-active state.
So I created one more page "AddGroup.aspx" with one textbox and a save button.

But I am not able to show the popup as well as not able to inactive the background page.

Please help me.


Thanks in advance.

推荐答案

使用ajax的ModalPopup.
http://www.asp.net/ajax/ajaxcontroltoolkit/samples/modalpopup/modalpopup.aspx [^ ]

ModalPopup using ajax.
http://www.asp.net/ajax/ajaxcontroltoolkit/samples/modalpopup/modalpopup.aspx[^]

<asp:Button ID="button"  onclick=" openPopup();return false;" />

将此Javascript代码添加到head

add this Javascript Code in head

<script language="javascript">
    function openPopup() {
        window.scrollTo(0, 0);
        var width = document.documentElement.clientWidth + document.documentElement.scrollLeft;
        var height = document.documentElement.clientHeight + document.documentElement.scrollTop;
      
 var layer = document.createElement(''div'');
        layer.style.zIndex = 2;
        layer.id = ''layer'';
        layer.style.position = ''absolute'';
        layer.style.top = ''0px'';
        layer.style.left = ''0px'';
        layer.style.height = document.documentElement.scrollHeight + ''px'';
        layer.style.width = width + ''px'';
        layer.style.backgroundColor = ''black'';
        layer.style.opacity = ''0.75'';
        layer.style.filter += ("progid:DXImageTransform.Microsoft.Alpha(opacity=75)");
        document.body.style.position = ''static'';
        document.body.appendChild(layer);
        var size = { ''height'': 220, ''width'': 750 };
        var iframe = document.createElement(''iframe'');
        iframe.name = ''Logic Form'';
        iframe.id = ''popup''; //optional
        iframe.src = ''AddGroup.aspx’;
        iframe.style.height = size.height + ''px'';
        iframe.style.width = size.width + ''px'';
        iframe.style.position = ''fixed'';
        iframe.style.zIndex = 3;
        iframe.style.backgroundColor = ''white'';
        iframe.frameborder = ''0'';
        iframe.style.top = ((height + document.documentElement.scrollTop) / 2) - (size.height / 2) + ''px'';
        iframe.style.left = (width / 2) - (size.width / 2) + ''px'';
        document.body.appendChild(iframe);
    }       
  script>

希望这会有所帮助.

Hope this helps.

这篇关于通过按钮弹出表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！