Since I'm very new to HTML and JavaScript, I wonder if there are possibilities for popups like the alert() popup? As I think I figured out, there are three predefined popups in JavaScript, alert(), confirm() and prompt(). But I want to make a custom popup, with HTML code in it, but I have no idea how to approach to this.
Are there methods in JavaScript itself to override the look of a popup, or do I neet to import certain packages to achieve this?
Since I'm very new to HTML and JavaScript, I wonder if there are possibilities for popups like the alert() popup? As I think I figured out, there are three predefined popups in JavaScript, alert(), confirm() and prompt(). But I want to make a custom popup, with HTML code in it, but I have no idea how to approach to this.
Are there methods in JavaScript itself to override the look of a popup, or do I neet to import certain packages to achieve this?
8 Answers
Reset to default 1Sounds like you need a lightbox and not necessarily a pop up window. There are plenty around and if your using jquery then that has many free jquery lightbox plugins available.
You can see here for plenty of examples, I personally like jQuery lightbox plugin.
Import.
A really good example of this is Twitter Bootstrap's modal control--http://twitter.github./bootstrap/javascript.html#modals.
You can't put custom HTML in alerts.
I would remend using jQuery UI Dialogs to create custom dialogs. They will be on top of your page with a glasspane, and not in a popup window
You cannot alter the look and feel of the dialoges provided by the browser, which are accessible through the functions you mention in your questions.
You'd need to build something in Javascript that mimics the behaviour of dialogs. I would remend not starting from scratch rather using a library that allows you to create dialogs easily. A good example is http://jqueryui./dialog/.
Yes. There are a number of different "popup's" you can use, which are often referred to as Modal or Dialog windows.
You can create custom alerts with HTML using a library such as jQuery UI or Twitter Bootstrap. There are other's available but i'd suggest that these are the more mon.
jQuery UI
http://jqueryui./dialog/
Twitter Bootstrap
http://twitter.github./bootstrap/javascript.html#modals
A modal example from the jQuery UI page to get you started:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Modal confirmation</title>
<link rel="stylesheet" href="http://code.jquery./ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery./jquery-1.8.2.js"></script>
<script src="http://code.jquery./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.">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>
I would personally use Colorbox for this. Colorbox is very versatile and can be used to display alerts as well as other things.
http://www.jacklmoore./colorbox
There are many JS libraries containing Popups, from AjaxControlToolkit to jQuery, etc.
If you want to keep it simple, you can create it youself by using DIVs. You can create an absolute-positioned DIV which will represent your popup and use JavaScript to show and hide it, for example by setting the DISPLAY or VISIBLE properties.
Yes
details > p {
padding: 0.5rem;
background: lightcoral;
margin: 0;
display: flex;
flex-direction: column
}
details[open] {
position: fixed;
width: 33%;
left: 33%;
top: 10vh;
outline: 10000px #000000d4 solid
}<details>
<summary>Popup</summary>
<p>Powered by html<input></p>
</details>
<details>
<summary>Popup</summary>
<p>Powered by html<input></p>
</details>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745443711a4627947.html
评论列表（0条）