如何在点击按钮时打开自定义弹出窗口？

问题描述：

我有一个场景，当我点击一个按钮时，必须打开一个弹出窗口，询问“您是否想执行此操作”。有两个按钮确定和取消。按任何按钮控制必须去我的控制器，并执行所需的任务。如何在点击按钮时打开自定义弹出窗口？

做完谷歌之后，我找到了一种使用windows.open的方法，但是我无法对此应用我的css，并且没有特定的url。所以这没有奏效。

我曾尝试过，当页面加载一个具有此数据的div应该隐藏并且点击它之后必须显示，但是这不会给出popup的感觉。

<body onload="hide()"> 
    <center> 
     <script> 
      function hide() { 
       document.getElementById("show").style.visibility = "hidden"; 
      } 

      function show() { 
       document.getElementById("show").style.visibility = "visible"; 
      } 
     </script> 
     <div id="form"> 
      <form method="get"> 
       <div id="show">Demo</div> 
       <table> 

        <tr> 
         <td></td> 
         <td><a id="dialog-link" href=""> 
          <button type="button" value="Show Pop up" 
            onclick="show()">Click</button> 
         </a></td> 
        </tr> 
       </table> 
      </form> 
     </div> 
    </center> 
</body>

简而言之，要打开类似的引导模式窗口的一些信息是吗？ – Beri 2014-12-08 08:32:38

是，点击按钮执行操作 – OPTIMUS 2014-12-08 08:34:29

请删除Java标签，因为JavaScript与Java完全无关。 – Phiwa 2014-12-08 08:36:15

答

我的猜测： 1.添加样式 “显示：无”，将隐藏DOM你的元素。 2.使用JS更改该属性。

<body onload="hide()"> 
    <center> 
     <script> 
      function hide() { 
      document.getElementById("show").style.display = 'none'; 
      } 

      function show() { 
       document.getElementById("show").style.display = 'block'; 
          } 
     </script> 
     <div id="form"> 
      <form method="get"> 
       <div id="show" style="display: none;">Demo</div> 
       <table> 
        <tr> 
         <td></td> 
         <td><a id="dialog-link" href=""><button type="button" 
            value="Show Pop up" onclick="show()">Click</button></a></td> 
        </tr> 
       </table> 
      </form> 
     </div> 
    </center> 
</body>

下面是一个类似的话题： javascript hide/show element

如果你想比确认模式更多的东西，东西有更多的CSS，我会进入自举，因为从头开始创建一个模式窗口有时可能很难，而且bootstrap为你提供了免费的API。但它会在你的应用中需要jQuery。

但是，如果您希望此元素的行为类似于确认弹出窗口，警报或引导模式，则需要处理您的css。我的snipplet会简单地显示/隐藏一个元素，但它没有css类:) – Beri 2014-12-08 08:38:16

我使用jquery模态框从现在开始 – OPTIMUS 2014-12-08 09:21:33

当我为模态框做同样的应用程序时，它正在工作，但是当我将这个逻辑与我现有的代码，然后它正在下降。任何其他方式 – OPTIMUS 2014-12-08 10:08:05

答

我认为你需要确认框：

 function show() { 
confirm("do your operation!"); 
}

否我想要自定义对话框 – OPTIMUS 2014-12-08 10:08:36

请访问此处：http：//www.dynamicdrive.com/forums/showthread.php？75527-创建自定义提示对话框 - 检索值 - 的文本字段放大器店作为一种-VAR – 2014-12-08 10:12:58

如何在点击按钮时打开自定义弹出窗口？

相关推荐