如何在點擊按鈕時打開自定義彈出窗口？

我有一個場景，當我點擊一個按鈕時，必須打開一個彈出窗口，詢問「您是否想執行此操作」。有兩個按鈕確定和取消。按任何按鈕控制必須去我的控制器，並執行所需的任務。如何在點擊按鈕時打開自定義彈出窗口？

做完谷歌之後，我找到了一種使用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>

來源

2014-12-08 OPTIMUS

簡而言之，要打開類似的引導模式窗口的一些信息是嗎？ – 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。

來源

2014-12-08 08:36:51 Beri

但是，如果您希望此元素的行爲類似於確認彈出窗口，警報或引導模式，則需要處理您的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!"); 
}

來源

2014-12-08 08:37:24

否我想要自定義對話框 – OPTIMUS 2014-12-08 10:08:36

請訪問此處：http：//www.dynamicdrive.com/forums/showthread.php？75527-創建自定義提示對話框 - 檢索值 - 的文本字段放大器店作爲一種-VAR – 2014-12-08 10:12:58

如何在點擊按鈕時打開自定義彈出窗口？

回答

相關問題