Seeking assistance in creating an HTML, CSS, and JS/jQuery popup. Looking to have a button that reveals a div tag when clicked, which can also be closed. Any quick responses with solutions would be greatly appreciated. Thank you in advance!
Seeking assistance in creating an HTML, CSS, and JS/jQuery popup. Looking to have a button that reveals a div tag when clicked, which can also be closed. Any quick responses with solutions would be greatly appreciated. Thank you in advance!
If you want the window to resemble Facebook's style, simply use the provided CSS code. It was taken from a current project I am involved in.
The HTML code is also copied, so all you need to do is click on the link to display the div in a jQuery dialog box.
Don't forget to include links to the necessary jQuery files, which I haven't included here.
/* Document : fbdialog Created on : Jul 29, 2013, 7:33:42 PM Author : danny Description: The purpose of this stylesheet is explained below. */
/* Facebook Dialogue Styles */
.ui-widget-overlay {
background:url(images/overlay.png) repeat 0 0;
}
.ui-dialog {
background:rgba(82,82,82,0.7);
border-radius:8px;
-webkit-border-radius:8px;
padding:10px;
}
.ui-dialog .ui-dialog-titlebar {
background:#6D84B4;
border:1px solid #3B5998;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
color:#FFF;
font-size:14px;
font-weight:700;
padding:5px;
}
.fb-dialogue {
border-left:1px solid #555;
border-right:1px solid #555;
border-bottom:1px solid #CCC;
background-color:#FFF;
overflow:hidden;
display:none;
padding:0;
}
.fb-dialogue p,.fb-dialogue div {
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:13px;
}
.ui-widget-content {
padding-top: 15px;
background:none none 50% top repeat-x;
}
.ui-dialog-titlebar-close {
display:none;
}
.ui-dialog .ui-corner-all {
-moz-border-radius:0;
-webkit-border-radius:0;
border-radius:0;
}
.ui-dialog .ui-dialog-buttonpane {
background:#F2F2F2;
border-left:1px solid #555;
border-right:1px solid #555;
border-bottom:1px solid #555;
margin:0;
padding-top: 10px;
padding-bottom: 40px;
padding-right: 15px;
}
.ui-dialog .ui-dialog-buttonpane button {
margin:0px;
padding:4px 12px;
float: right;
}
.ui-state-default,.ui-widget-content .ui-state-default {
color:#FFF;
background:#6D84B4;
border-color:#29447E;
}
.ui-state-hover,.ui-widget-content .ui-state-hover {
background:#6D84B4;
border-color:#29447E;
}
.ui-state-active,.ui-widget-content .ui-state-active {
background:#4F6AA3;
border-bottom-color:#29447E;
box-shadow:0 1px 0 rgba(0,0,0,.05);
-webkit-box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.ui-button-text-only .ui-button-text {
padding:2;
}
</style>
<a class="open-event" id="pbutton" href="javascript:void(null);" onclick="showDetailsDialog();">Click Here</a>
<div id="confirmDialog" class="fb-dialogue" >
<p>
Here is the text of your div window!
</p>
</br>
</div>
<script type="text/javascript">
function showDetailsDialog() {
$("#confirmDialog").dialog({
title: "Signup Confirmation",
resizable: true,
width: 400,
position: ['50%',300],
draggable: true,
buttons: {
"Confirm": function () {
$('#confirmDialog').dialog('close');
},
}
});
});
</script>
<div id="confirmDialog" class="fb-dialogue" >
<p>
Here is the text of your div window!
</p>
</br>
</div>
When it comes to creating popup elements, there are numerous plugins available for the JqueryUI framework that can be utilized. One such plugin that I have personally used is showcased in this example:
If you require a more traditional popup window instead, you could simply generate a separate page and utilize Javascript's window.open function.
If you're looking for a user-friendly confirmation dialog plugin, I highly recommend using JQuery Confirm. The implementation is straightforward and the documentation can be found here. To get started, make sure you have Bootstrap, JQuery, and confirm-JS included in your project.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Demo of jquery.confirm with Bootstrap 3</title>
<!--bootstrap-->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<!--JQuery-->
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--confirm-js-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.0.3/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.0.3/jquery-confirm.min.js"></script>
</head>;
<body>
<div class="container">
<div class="page-header">
<h1>Demo</h1>
</div>
<table class="table">
<thead>
<tr>
<th class="col-lg-3"></th>
<th class="col-lg-1">Demo</th>
<th class="col-lg-8">Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>Confirmation dialog customized with JS:</td>
<td><button class="btn btn-primary" id="complexConfirm">Click me</button></td>
<td>
<pre><button class="btn btn-primary" id="complexConfirm">Click me</button></pre>
<pre class="prettyprint"><code>$("#complexConfirm").confirm({
title:"Delete confirmation",
text:"This is very dangerous, you shouldn't do it! Are you really really sure?",
confirm: function(button) {
alert("You just confirmed.");
},
cancel: function(button) {
alert("You aborted the operation.");
},
confirmButton: "Yes I am",
cancelButton: "No"
});</code></pre>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$("#complexConfirm").confirm({
title: 'Confirm!',
content: 'Simple confirm!',
theme: 'supervan', // 'material', 'bootstrap'
backgroundDismiss: false,
backgroundDismissAnimation: 'glow',
buttons: {
confirm: function () {
$.alert('Confirmed!');
},
cancel: function () {
$.alert('Canceled!');
},
somethingElse: {
text: 'Something else',
btnClass: 'btn-primary',
keys: ['enter', 'shift'],
action: function(){
$.alert('Something else?');
}
}
}
});
</script>
</div>
<!--bootstrap-->
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>I'm currently working on a Megamenu using Bootstrap 4 dropdown functionality. My goal is to implement a custom container like <div class="dropdown-container"> to control the visibility of the dropdown content, instead of relying on Bootstrap&ap ...
I am currently incorporating MUI v5 along with Gatsby Image in my project. To maintain consistency in my styling syntax throughout the application, I decided to include the sx prop in the GatsbyImage component. This is how I attempted it: <Box compon ...
I need to access a specific slide within an array of slides. $slide = $(".slide") Only one of the slides in the array is marked with the class "current". How can I target this particular slide from the set? ...
I am currently working on an ASP.NET MVC web application and have a query: If I have a strongly typed view and I submit it, the object (of the strongly type) will be filled and sent to the server. But what if one of the properties of the strongly typed i ...
Creating a business directory website involves fetching data from a database. The issue arose when attempting to apply a function uniformly to all boxes, as only the first one with the specified id would function correctly. To address this problem, the fol ...
Recently, I encountered an issue with a .NET page that included a large number of identical dropdown lists within a repeater. Unfortunately, the rendering performance of the website was below expectations. In an attempt to improve the performance, I exper ...
I have a code snippet that I'm struggling with. <p>haha</p> <button class="btn btn-light" onclick="nextSibling.classList.toggle('d-none');"> <i class="fa fa-ellipsis-h"></i> </button> <div class= ...
I'm having trouble getting jQuery to work on my Wordpress site. It works perfectly fine on my non-Wordpress version, but I'm struggling to adapt it for Wordpress. I attempted to run a simple script: This is what I have in my theme functions.php: ...
I'm facing an issue while working with React where I am encountering difficulty passing a function from a parent component to multiple children components. The function calls other functions that are also housed within the parent component. Although ...
I am attempting to customize the mui date picker, but I am facing issues with applying CSS styles to it. I have tried using both inline styles and external styling by assigning classes, but nothing seems to work. I specifically want to adjust its height. ...
My Vue.js application has grown to be quite large with over 80 .vue components. Users have been complaining about their phone batteries draining quickly and Safari displaying a "This webpage is using significant energy..." warning. I have tried investigat ...
A dashboard on my interface showcases various cards containing data retrieved from the backend API and stored in an array called notes[]. When I click on a specific card, a pop-up named updatecard should appear based on its id. However, I am facing issues ...
I have set up Private Routing in my project. With this configuration, if there is a token stored in the localStorage, users can access private routes. If not, they will be redirected to the /404 page: const token = localStorage.getItem('token'); ...
Recently, I've been facing frequent style breaking issues on my Magento sites (1.9.2+). This results in the home page displaying only text with missing CSS, JS, and images. To fix this problem, I usually clear the cache by deleting the var/cache fold ...
Here's the Markup I'm Using : Note: Currently, I am utilizing the Metronic pre-built template that comes with all necessary components. <link href="vendors.bundle.css" rel="stylesheet" type="text/css"> <link href="style.bundle. ...
https://i.stack.imgur.com/VOLDT.png I've been working on a nextjs redux project and I keep running into this error whenever I refresh my page. Despite searching for a solution, I haven't been able to resolve it. The official next js blog suggest ...
I am a beginner in angularjs. Recently, I created an angularJS service based on the following diagram: https://i.sstatic.net/NifC5.png The Global Service acts as a way for controllers to communicate with each other. It holds data shared between parent an ...
For instance, I have this particular tag with concise content <div>It is brief</div> However, upon formatting, Visual Web Developer presents it as <div> It is brief</div> which is unattractive. What I desire is <div> ...
I have a question regarding this particular code snippet: null. Why is the server_request function not returning the responseText as expected? And how can I modify it to achieve the desired outcome?</p> ...
I recently tried out the Jquery Numeric plugin, but unfortunately I discovered that it does not work on FireFox 3.6 on OSX as it does not allow pasting. Therefore, I am in search of a different Jquery plugin or Javascript snippet that specifically allows ...