+ 23
How to create custom pop-ups in html?
I want to create custom beautiful pop-ups for my code
11 Respostas
+ 29
🎃#H P 22™🎃 Please be reminded that downvote abuse is against our guidelines.
+ 21
https://code.sololearn.com/WEVFA7XzvUmK/?ref=app
Search sweetalerts2.github
+ 13
You can create your own by using HTML and CSS
Or use library like sweetalert.js
https://code.sololearn.com/Wt5p4O33LVUA/?ref=app
https://code.sololearn.com/WguJrVB7EUMk/?ref=app
+ 8
You will have to design it yourself with css. Also javascript will be needed to trigger it
+ 8
Beginner friendly may help you
https://code.sololearn.com/We75g9TtAx4x/?ref=app
+ 3
In html5 there's no need to use additional tools. You may use new element named "dialog". If you want to make your web page cross-browser, then there are polyfills for this!
Enjoy using that element!
+ 2
The easiest way to create popups is to use bootstrap, it'll save a lot of energy. CSS/JS is not necessary. Input bootstrap library ref. link in the head and add the code in body:
<!-- Trigger the popup with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
If you need help on the boostrap library link , contact me. I hope I've been able to profer suitable solution.
+ 2
How to replace a scroll up button in a html website with something fancy like a super hero or a rocket that goes to the top of the website from the bottom???
+ 2
check this.
https://code.sololearn.com/WdvSI1cN8OP9/?ref=app
0
You can start looking for simple popup from here :
https://www.w3schools.com/howto/howto_js_popup.asp
Or you can directly go for advanced popup :
https://freshdesignweb.com/jquery-javascript-popup-window/
0
Hello,
Here is full code for custom pop-up. Follow few easy steps to create your own pop-up:
Step 1: Include jQuery file inside head tag
<script src="jquery-1.js" type="text/javascript"></script>
Step 2: Add pop-up HTML inside body tag
<button class="popup">Click to open popup</button>
<div style="display: none;" class="pop-outer">
<div class="pop-inner">
<button class="close">X</button>
<h2>Pop-up title goes here.</h2>
<p>Pop-up content goes here.</p>
</div>
</div>
Step 3: Add CSS style inside head tag
<style>
.pop-outer {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.pop-inner {
background-color: #fff;
width: 500px;
height: 300px;
padding: 25px;
margin: 15% auto;
}
</style>
Step 4: Add jQuery code inside head tag
<script>
$(document).ready(function (){
$(".popup").click(function (){
$(".pop-outer").fadeIn("slow");
});
$(".close").click(function (){
$(".pop-outer").fadeOut("slow");
});
});
</script>