<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h3>Vue Js Popup Modal</h3>
<button class="popup-button" @click="openPopup">Open Popup</button>
<div class="modal" v-if="showPopup">
<div class="modal-content" ref="modalRef">
<button class="close-x" @click="closePopup"> X</button>
<div class="modal-header">
<h1>Vue Js Modal Popup</h1>
</div>
<div class="modal-body">
<p>This is some text inside the popup.</p>
</div>
<div class="modal-footer">
<button class="close-button" @click="closePopup">Close</button>
<button class="save-button" @click="saveModal">Save</button>
</div>
</div>
</div>
</div>
<script type="module">
const app = Vue.createApp({
data() {
return {
showPopup: false,
}
},
methods: {
saveModal() {
alert('Successfully Save data')
this.closePopup();
},
openPopup() {
this.showPopup = true;
document.addEventListener('mouseup', this.closeModalOnClickOutside);
},
closePopup() {
this.showPopup = false;
document.removeEventListener('mouseup', this.closeModalOnClickOutside);
},
closeModalOnClickOutside(event) {
const modal = this.$refs.modalRef;
if (!modal.contains(event.target)) {
this.closePopup();
}
}
},
});
app.mount('#app');
</script>
<style>
.popup-button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.modal-content {
background-color: white;
padding: 20px;
border-radius: 5px;
max-width: 500px;
width: 80%;
position: relative;
}
.close-x {
position: absolute;
top: 10px;
right: 10px;
padding: 5px;
background-color: transparent;
border: none;
cursor: pointer;
font-size: 18px;
color: #555;
}
.close-x:hover {
color: #ff0000;
/* Change to your desired hover color */
}
.modal-header {
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}
.modal-body {
padding: 10px 0;
}
.modal-footer {
padding-top: 10px;
border-top: 1px solid #ccc;
display: flex;
justify-content: flex-end;
}
.close-button,
.save-button {
padding: 10px 20px;
border: none;
cursor: pointer;
font-weight: bold;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.close-button {
background-color: #f44336;
color: white;
}
.save-button {
background-color: #4CAF50;
color: white;
margin-left: 10px;
}
.close-button:hover {
background-color: #d32f2f;
}
.save-button:hover {
background-color: #45a049;
}
</style>
</body>
</html>