JavaScript - 如何在不使用alert（）或window.open（）的情況下創建對話窗口？

我在想，如果有不使用alert(), confirm(), prompt()或window.open()JavaScript - 如何在不使用alert（）或window.open（）的情況下創建對話窗口？

就是因爲我希望能夠把任何東西對話框內的原因在JavaScript中創建一個彈出式對話框的方式。任何內容。（例如，一個文本框，div，格式化的內容，或者我希望與任何文本一起輸入的按鈕），並且alert(), confirm(),或prompt()都不允許您這樣做。 prompt()只允許一個文本框。而alert()和confirm()只允許它的預設按鈕和純文本。我不想使用window.open()，因爲它會重定位到其他網址或具有相同功能的相同網址。

另一件事是，所有給出的選項警報用戶，因此功能名稱alert()和prompt()我想要的東西，這是一個有點不太侵入。

我不想使用jQuery插件或製作自己的插件的原因是因爲我想讓對話框具有本機到操作系統的GUI。

現在，我從來沒有見過這個使用任何人，我會說我有足夠的網上衝浪和參考經驗。所以如果這是不可能的，那麼另一個可以接受的答案將是有一個alert()或confirm()或prompt()與可定製按鈕（但無論我想要什麼標題值）。

編輯：這個要求背後的原因是因爲我一直在服用的計算機科學課程最近涉及C++和Python 2，其中有通過調用系統的GUI能力做到這一點，但我更舒服的瀏覽器客戶端架構。這和我也只是好奇。

編輯2：我不希望使用插件，可以用劇烈的方式操縱。我感興趣的是我可以用系統做什麼不是我能用 hacker做什麼。

來源

2013-02-10 ModernDesigner

JavaScript是不是低層次的。 – 0x499602D2 2013-02-10 02:02:26

什麼是環境？網絡瀏覽器？請注意'alert（）'＆co。是瀏覽器API，與JavaScript無關（這是一種腳本語言，因此沒有定義I/O API或任何其他形式的特定於環境的API）。 – 2013-02-10 02:08:00

沒錯，所以我想我的擔心是如何操作系統的環境，類似於瀏覽器的功能，而不需要實際製作本地應用程序。否則，我會使用C++或Python。 – ModernDesigner 2013-02-10 02:10:09

您要求的內容可能在JavaScript中，但不在客戶端。在服務器端，您的JavaScript運行於RingoJS和node.js。

Ringo可以與Java軟件包接口。所以你可以基本上使用Swing在JavaScript中創建GUI應用程序。例如：

var {FlowLayout} = java.awt; 
var {JButton, JFrame, JLabel} = javax.swing; 

var frame = new JFrame("Hello World!"); 
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 

var contentPane = frame.getContentPane(); 
contentPane.add(new JLabel("Hello World!")); 
contentPane.add(new JLabel("Press Me!")); 
contentPane.setLayout(new FlowLayout); 

frame.pack(); 
frame.setVisible(true);

然而，在客戶端，您需要使用庫爲您創建此類對話框或自行打印。如果您決定自己創建，那麼您需要檢測用戶正在使用的操作系統，並相應地設置對話框的樣式。

您可能會更好地使用jQuery UI。另外，我不認爲這是一個好主意，讓您的網絡應用程序看起來像本地應用程序的原因有兩個：

它不會看在所有的操作系統和所有配置均相同。所以很容易看到你試圖讓它看起來很原生，這打破了網站的感覺。而是堅持你的網站的主題。
使用jQuery UI或其他類型的庫更容易。其他任何事情都只是矯枉過正，浪費時間（至少根據我的說法）。

來源

2013-02-10 02:22:50

+1嗯......有趣的輸入。我希望我可以在客戶端（瀏覽器）做到這一點，但這仍然很有趣。我知道我不應該這樣做，因爲它看起來不一樣，我只是好奇。我不會在真實生活中使用它。我會接受你的回答，認爲這並不能真正解決我的問題，這足以讓我脫身。謝謝！ – ModernDesigner 2013-02-10 02:30:06

你仍然可以使用jQuery模態（或任何JS模式），但你可以根據用戶的平臺對它們進行皮膚處理。但是，UA檢測很容易被欺騙，特別是有豐富的擴展和開發工具。此外，除了視口的四面，JS沒有管轄權（除非你從瀏覽器擴展/插件中獲得槓桿作用，額外的麻煩和大部分時間有限）。你不能直接用JS調用本地操作。

總而言之，我會說這是可能的，但非常棘手。

來源

2013-02-10 02:03:46 Joseph

嗯，1）我想到了基本的平臺檢測，但複製平臺的UI是最棘手的。此外，我想知道我能用系統做什麼。不是我能用黑客做什麼。 2）我不介意視口的四面。我並不擔心從瀏覽器啓動本地應用程序，這根本不是我的意圖。只是想學習。好的答案，但是。 – ModernDesigner 2013-02-10 02:07:06

另外，正如你所說，UA檢測可能是一次顛簸。各地的開發者都討厭瀏覽器/系統檢測。我可以理解。但是，如果用戶對技術精通足以欺騙UA，那麼我不在乎它是否做了它應該做的事情，因爲用戶是（如所說的）技術精通程度足以理解。所以我想這將是我的後備計劃。雖然很多人會對此有強烈的意見。 – ModernDesigner 2013-02-10 02:11:55

爲什麼不只是查找一個可定製的JavaScript插件？這可能是最簡單的，而不是自己編碼。但是，供大家參考：

<!--//create a div that has the contents of what you want--> 
    <div id="popUpDialog" style='display: none; background-color: #999; position: absolute; top: 300px; left: 200px; width: 120px; height: 120px;'>some Text here<input type='radio' /><br /> Options 2<input type='radio' /></div> 

    <!--//create an event to cause this popup to show up somewhere... i.e. a buttons onClick event--> 
    <input id='btnTrigger' type='button' value='Show Dialog'></input> 
    <input id='btnTrigger2' type='button' value='Close Dialog'></input> 
    <script type="text/javascript"> 
    var el = document.getElementById("btnTrigger"); 

    el.addEventListener('mousedown', function() { 
    var popUp = document.getElementById("popUpDialog"); 
    popUp.style.display = 'inline-block'; 
    }); 

    var el = document.getElementById('btnTrigger2'); 
    //alert(el); 
    el.addEventListener('mousedown', function() { 
    var popUp = document.getElementById('popUpDialog'); 
    popUp.style.display = 'none'; 
    }); 
    </script>

，這裏是一個的jsfiddle你 http://jsfiddle.net/crislivinitup/9VN7y/

哦，順便說一下，在這個例子中，我沒有對div的位置改變到絕對的，或設定背景 - 顏色（這意味着如果它彈出，背景將是透明的）。這只是爲了給你彈出一個元素的一般概念。

來源

2013-02-10 02:21:41 Klik

採取從引導模式對話框一看，他們看起來很酷:) http://twitter.github.com/bootstrap/javascript.html#modals

來源

2013-02-10 02:24:31

JavaScript - 如何在不使用alert（）或window.open（）的情況下創建對話窗口？

回答

相關問題