2012-11-12 101 views
1

由於我對HTMLJavaScript非常陌生,我不知道是否有像彈出窗口alert()這樣的彈出窗口的可能性?因爲我覺得我想通了,也有JavaScriptalert()confirm()prompt()三個預定義的彈出窗口。但我想製作一個自定義彈出框,其中包含HTML代碼,但我不知道如何處理此問題。在html頁面上設計一個彈出窗口

是否有JavaScript自己的方法來覆蓋一個彈出式的外觀,還是我NEET進口某些包來實現這一目標?

+0

家庭鍋!!!! –

回答

1

聽起來像是你需要一個燈箱,不一定一個彈出窗口。有很多周圍,如果你使用jQuery然後有許多免費的jQuery的插件可用。

你可以看到here爲大量的例子,我個人比較喜歡jQuery的燈箱插件。

1

導入。

一個很好的例子就是Twitter Bootstrap的模態控制 - http://twitter.github.com/bootstrap/javascript.html#modals。

1

您不能將自定義HTML放入警報中。

我會建議使用jQuery UI Dialogs創建自定義對話框。他們將在與您的glassPane頁面的頂部,而不是在彈出窗口中

1

您不能改變瀏覽器提供的對話框的外觀和風格,這些對話框可以通過您在問題中提到的功能進行訪問。

你需要建立在Javascript東西,模仿對話的行爲。我建議不要從頭開始,而是使用允許您輕鬆創建對話框的庫。一個很好的例子是http://jqueryui.com/dialog/

1

是的。有許多不同的「彈出窗口」可以使用,它們通常被稱爲模態窗口或對話窗口。

您可以使用庫(例如jQuery UI或Twitter Bootstrap)創建HTML自定義警報。還有其他的可用,但我建議這些更常見。

jQuery UI的

http://jqueryui.com/dialog/

Twitter的引導

http://twitter.github.com/bootstrap/javascript.html#modals

從jQuery UI頁面模態例子,讓你開始:

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Dialog - Modal confirmation</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <script> 
    $(function() { 
     $("#dialog-confirm").dialog({ 
      resizable: false, 
      height:140, 
      modal: true, 
      buttons: { 
       "Delete all items": function() { 
        $(this).dialog("close"); 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
    }); 
    </script> 
</head> 
<body> 

<div id="dialog-confirm" title="Empty the recycle bin?"> 
    <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p> 
</div> 

<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> 


</body> 
</html> 
1

有含彈出窗口,從AjaxControlToolkit jQuery的等許多JS庫

如果你想保持簡單,你可以使用DIV創建它自己。您可以創建一個絕對定位的DIV,它將表示您的彈出窗口,並使用JavaScript來顯示和隱藏它,例如通過設置DISPLAY或VISIBLE屬性。

相關問題