如何使用jquery創建自定義彈出框

-1

我想用jquery創建簡單的自定義彈出框。我的html代碼如下。如何使用jquery創建自定義彈出框

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $("#btn1").click(function(){ 
 
     alert("Thiws should be custom popup"); 
 
    }); 
 
    
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
<button id="btn1">Show Text</button> 
 
</body> 
 
</html>

On clicking button it should open a form in popup asking username, email address and also it should have submit button

僅供參考我想問 http://www.c-sharpcorner.com/UploadFile/736ca4/custom-popup-window-using-jquery/

來源

2015-03-03 deepak

爲什麼你不想爲此使用colobox插件？ – 2015-03-03 06:18:06

看看jQuery UI對話框小部件。 – Barmar 2015-03-03 06:19:04

如果您的代碼需要幫助，則需要發佈Javascript。我們不會爲你寫信。 – Barmar 2015-03-03 06:19:36

只需創建一個HTML文件，然後複製/粘貼的代碼是什麼。

<html> 
<head> 
<title></title> 
</head> 
<body> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 


    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#OpenDialog").click(function() { 
       $("#dialog").dialog({modal: true, height: 400, width: 400 }); 
      }); 
     }); 
    </script> 
    <a id="OpenDialog" href="#">Click here to open dialog</a> 
    <div id="dialog" title="Dialog Title"> 
     <p>test</p> 
    </div> 

</body> 
</html>

來源

2015-03-03 06:44:39 user2746803

您可以使用功能和CSS我在這裏寫下：

https://jsfiddle.net/mm7b7t5t/

打開一個Hello World彈出：

var hello = new popup([{text:"Close"}], "Hello!", "<p>Hello World</p>"); 
hello.open();

您可以彈出窗口拖拽，添加多個按鈕等etc

jQuery對話框在我看來是一團糟，我更喜歡我自己的彈出代碼^^

來源

2016-01-08 17:09:03 seahorsepip

如何使用jquery創建自定義彈出框

回答

相關問題