Scribd
Importer
13 vues6 pages

Ajouter un bouton de publication modale

Transféré par

tsassedenilson7
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats TXT, PDF, TXT ou lisez en ligne sur Scribd
13 vues6 pages

Ajouter un bouton de publication modale

Transféré par

tsassedenilson7
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats TXT, PDF, TXT ou lisez en ligne sur Scribd

D'accord !

Nous allons ajouter un bouton "Nouvelle Publication" qui ouvrira une


fenêtre modale dans la même page pour créer une publication. Voici le code mis à
jour pour intégrer cette fonctionnalité :

### Code HTML avec fenêtre modale pour les publications

```html
<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifier le Profil</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
padding: 20px;
background: linear-gradient(to right, #6a11cb, #2575fc);
}

.container {
display: flex;
align-items: flex-start;
justify-content: center;
width: 100%;
max-width: 1200px;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.profile-container {
width: 150px;
height: 150px;
border-radius: 75px;
overflow: hidden;
border: 2px solid #333;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
margin-right: 20px;
}

.profile-image {
width: 100%;
height: auto;
}

.button-container {
display: flex;
flex-direction: column;
align-items: center;
}
.upload-button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #333;
color: white;
cursor: pointer;
margin-top: 10px;
}

.info-container {
display: flex;
flex-direction: column;
justify-content: center;
}

.info-item {
margin: 10px 0;
font-size: 18px;
}

.post-container {
margin-top: 20px;
width: 100%;
}

.post-form {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}

.post-input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
font-size: 16px;
}

.file-input {
margin-bottom: 10px;
}

.submit-post {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #333;
color: white;
cursor: pointer;
}

.post-item {
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}

.post-media-container {
border: 2px solid #333;
border-radius: 10px;
overflow: hidden;
margin-top: 10px;
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}

.post-media {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}

/* Styles pour la fenêtre modale */


.modal {
display: none; /* Masquée par défaut */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 600px;
border-radius: 10px;
}

.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

@media (max-width: 768px) {


.container {
flex-direction: column;
align-items: center;
}

.profile-container {
margin: 0 0 20px 0;
}

.info-item {
font-size: 16px;
}
}
</style>
</head>

<body>
<div class="container">
<div class="profile-container" id="profileContainer">
<img src="" alt="Profile Image" class="profile-image" id="profileImage"
style="display: none;">
<span id="defaultText">Aucune image</span>
</div>
<div class="info-container">
<div class="button-container">
<input type="file" id="fileInput" accept="image/*" style="display:
none;">
<button class="upload-button"
onclick="[Link]('fileInput').click();">Modifier le profil</button>
<button class="upload-button" id="newPostButton">Nouvelle
Publication</button>
</div>
<div class="info-item" id="profileName">Nom : Jean Dupont</div>
<div class="info-item" id="friendsCount">Amis : 150</div>
<div class="info-item" id="postsCount">Publications : 20</div>
</div>
</div>

<div class="post-container">
<h2>Publications</h2>
<div id="postList"></div>
</div>

<!-- Fenêtre modale pour créer une publication -->


<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" id="closeModal">&times;</span>
<h2>Créer une Publication</h2>
<div class="post-form">
<input type="text" class="post-input" id="captionInput"
placeholder="Écrivez votre légende ici..." />
<input type="file" class="file-input" id="mediaInput"
accept="image/*,video/*" />
<button class="submit-post" id="submitPost">Publier</button>
</div>
</div>
</div>

<script>
const fileInput = [Link]('fileInput');
const profileImage = [Link]('profileImage');
const defaultText = [Link]('defaultText');
const captionInput = [Link]('captionInput');
const mediaInput = [Link]('mediaInput');
const postList = [Link]('postList');
const submitPost = [Link]('submitPost');
const newPostButton = [Link]('newPostButton');
const modal = [Link]('myModal');
const closeModal = [Link]('closeModal');

[Link]('change', function () {
const file = [Link][0];
if (file) {
const reader = new FileReader();
[Link] = function (e) {
[Link] = [Link];
[Link] = 'block';
[Link] = 'none';
}
[Link](file);
}
});

[Link]('click', function () {
[Link] = 'block';
});

[Link]('click', function () {
[Link] = 'none';
[Link] = '';
[Link] = '';
});

[Link]('click', function () {
const captionText = [Link]();
const mediaFile = [Link][0];

if (captionText && mediaFile) {


const postItem = [Link]('div');
[Link] = 'post-item';

const caption = [Link]('p');


[Link] = captionText;
[Link](caption);

const mediaContainer = [Link]('div');


[Link] = 'post-media-container';

const mediaURL = [Link](mediaFile);


const mediaElement =
[Link]([Link]('image') ? 'img' : 'video');
[Link] = mediaURL;
[Link] = 'post-media';
[Link] = [Link]('video'); //
Ajoute des contrôles si c'est une vidéo
[Link](mediaElement);

[Link](mediaContainer);
[Link](postItem);
// Réinitialiser et fermer la modale
[Link] = '';
[Link] = '';
[Link] = 'none';
}
});

// Fermer la modale quand on clique en dehors de celle-ci


[Link] = function (event) {
if ([Link] === modal) {
[Link] = 'none';
[Link] = '';
[Link] = '';
}
};
</script>
</body>

</html>
```

### Modifications apportées :

1. **Bouton "Nouvelle Publication"** :


- Ajout d'un bouton qui ouvre une fenêtre modale pour créer une nouvelle
publication.

2. **Fenêtre Modale** :
- Création d'une div modale (`#myModal`) qui contient le formulaire pour saisir
la légende et télécharger les médias.
- La fenêtre est masquée par défaut et s'affiche lorsque l'utilisateur clique
sur le bouton "Nouvelle Publication".

3. **Styles pour la Modale** :


- Styles CSS pour la modale afin qu'elle soit centrée et ait un fond semi-
transparent.

4. **JavaScript pour la Modale** :


- Ajout de la logique pour ouvrir et fermer la modale, ainsi que pour
réinitialiser les champs de saisie.

### Fonctionnalité :
Les utilisateurs peuvent désormais créer de nouvelles publications via une fenêtre
modale tout en restant sur la même page. Si tu souhaites d'autres ajustements ou
fonctionnalités, fais-le moi savoir !

Vous aimerez peut-être aussi