Afficher et masquer des éléments en JS ?

basilegrnd -  
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   -
Salut,
J'entreprends actuellement un projet, qui est de recréér macOS Big Sur en ligne.

Pouvez-vous m'aider ? Je n'arrive pas à afficher et fermer les fenêtres...

Merci d'avance !

Pour info, voici mon code : 
<!DOCTYPE html>
	<head>
		<link rel="shortcut icon" type="image/png" href="favicon.png"/>
		<title>Online Big Sur</title>
		<link rel="icon" type="image/png" href="favicon.png" />
		<script type="text/javascript" src="date.js"></script>

<!--css-->

	<style>
		@font-face {

		     font-family: 'SF UI Display Ultralight';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Ultralight'), url('sf-ui-display-ultralight-58646b19bf205.woff') format('woff');

		     }
    

    
		@font-face {
		     font-family: 'SF UI Display Thin';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Thin'), url('sf-ui-display-thin-58646e9b26e8b.woff') format('woff');
		     }
    

    @font-face {
    font-family: 'SF UI Display Light';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Light'), url('sf-ui-display-light-58646b33e0551.woff') format('woff');
    }
    

    @font-face {
    font-family: 'SF UI Display Medium';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Medium'), url('sf-ui-display-medium-58646be638f96.woff') format('woff');
    }
    

    @font-face {
    font-family: 'SF UI Display Semibold';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Semibold'), url('sf-ui-display-semibold-58646eddcae92.woff') format('woff');
    }
    

    @font-face {
    font-family: 'SF UI Display Bold';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Bold'), url('sf-ui-display-bold-58646a511e3d9.woff') format('woff');
    }
    

    @font-face {
    font-family: 'SF UI Display Heavy';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Heavy'), url('sf-ui-display-heavy-586470160b9e5.woff') format('woff');
    }
    

    @font-face {
    font-family: 'SF UI Display Black';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Black'), url('sf-ui-display-black-58646a6b80d5a.woff') format('woff');
    }


			body {
			background-color: white;
			font-family: "SF UI Display Regular", "Arial", "sans-serif";
			color: white;
			background-image: url(wallpaper.jpg);
			background-attachment:fixed;
			cursor: url('cursor.png');
			overflow: hidden;
			padding: 0px;
			margin: 0px;
			}
			.taskbar {
			width:300px;
			height:60px;
			font-family:"SF UI Display";
			justify-self: bottom;
			margin: 10px;
			border-radius: 16px;
			background-color: #FFFFFFCF;
			}
			.center {
				position: fixed;
				display: flex;
				place-items: center;
				bottom: 0;
				width: 100%;
				justify-content: center;
			}
			.menu {
				text-shadow: 0px 3px 3px #00000055;
				background-color: #ADE5FF66;
				top: 0;
				justify-self:top;
				font-family: "SF UI Display Bold";
			}
			#draggable {
				width: 800px;
				height: 200px;
				background-color: white;
				border-radius: 8px;
			}
  			#draggable p {
				cursor: move; }
			iframe {
				border: 0px white;
				border-radius: 8px;
			}
			.time-indications {
				float: right;
			}
			</style>
		</head>

<!--html-->

	<html>
	<body>
		<div class="menu"><img src="blink.png" height=1px width=30px>Finder<img src="blink.png" height=1px width=30px>File<img src="blink.png" height=1px width=30px>Edit<img src="blink.png" height=1px width=30px>View<img src="blink.png" height=1px width=30px>Go<img src="blink.png" height=1px width=30px>Help<div class="time-indications">Mardi 19 novembre<img src="blink.png" height=1px width=15px>09:41</div></div>
		<center><div class="center"><div class="taskbar"><img src="calculator.png" height=60px><img src="settings.png" height=60px><img src="calender.png" height="60px"><a href="notes.html" onClick="openWin(this.href);return false"><img src="notes.png" height="60px"></a><img src="safari.png" height="60px"></div></div></center>
		<div id="draggable" class="ui-widget-content">
			<p class="ui-widget-header"><iframe src="notes.html" width=800px height=180px></iframe></p>
		  </div>
	</body> 
</html>

<!--javascript-->

<script type="text/javascript">
	function openWin(url){
		document.getElementById(draggable).style.display = block;
	}
}
</script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>

  <script>
  $( function(){
	$( "#draggable" ).draggable({ cancel: "p.ui-widget-header" });
    $( "div, p" ).disableSelection();
  } );
</script>

A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour
Tu as très certainement des erreurs qui sont signalés dans la console de ton navigateur.
rien que la première ligne de code javascript, il manque des côtes autour de l'id.
De plus, merci de préciser le langage, ici, HTML dans les balises de code afin que l'on ait la coloration syntaxique et la numérotation des lignes de code.
0

Discussions similaires

additionner nombres dans cellules avec texte
kawimaki -
kawimaki -

6 réponses
ne pas voir la story de quelqu'un mais sans la bloquer
Escargot20 -
lofoso -

1 réponse