Question

我是真正的菜鸟，我想学习，但我不得不创造一个弹出窗口..

这是我的代码

<!DOCTYPE html>
<html lang="en">
   <link rel="shortcut icon" href="https://sols-rpg.com/home/favicon.png" type="image/x-icon"/>
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="viewport" content="height=device-height, initial-scale=1">
      <meta name="description" content="">
      <meta name="author" content="">
      <title>LA-RP - Home</title>
      <script type="text/javascript">
         //<![CDATA[
         try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:1482933530,byc:0,owlid:"cf",bag2:1,mirage2:0,oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/dok3v=1613a3a185/"},atok:"76d6adaf2e1ad169990326f51d43e159",petok:"4520fa4333a7ead90224eaba558cbb032249d63d-1483805698-1800",zone:"sols-rpg.com",rocket:"0",apps:{"abetterbrowser":{"ie":"7","opera":null,"chrome":null,"safari":null,"firefox":null}}}];!function(a,b){a=document.createElement("script"),b=document.getElementsByTagName("script")[0],a.async=!0,a.src="//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=f2befc48d1/cloudflare.min.js",b.parentNode.insertBefore(a,b)}()}}catch(e){};
         //]]>
      </script>
      <link href="css/main.css" rel="stylesheet">
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
   </head>
   <body>
      <nav class="navbar navbar-inverse navbar-static-top" role="navigation" style="border-bottom: #0d79c9 3px solid;">
         <div class="container">
            <div class="navbar-header">
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
               <span class="sr-only">Toggle navigation</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               </button>
               <div class="navbar-logo"><img src="img/logov3.png"></div>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
               <ul class="nav navbar-nav navbar-right" style="margin-top:6px;">
                  <li>
                     <a href="https://la-rp.ro/" style="color:#fff;"> <span class="glyphicon glyphicon-home"></span> <b>Acasa</b></a>
                  </li>
                  <li>
                     <a href="https://la-rp.ro/forum/"> <span class="glyphicon glyphicon-globe"></span> <b>Forum</b></a>
                  </li>
                  <li>
                  </li>
                  <li>
                     <a href="https://la-rp.ro/marketplace/"> <span class="glyphicon glyphicon-shopping-cart"></span> <b>Magazin</b></a>
                  </li>
                  <li>
                     <a href="https://la-rp.ro/info/"> <span class="glyphicon glyphicon-info-sign"></span> <b>Anunturi</b></a>
                  </li>
               </ul>
            </div>
         </div>
      </nav>
      <div class="banner">
         <h1>Bine ai venit pe <font style="color:#0d79c9;">Los Angeles Roleplay</font>!</h1>
         <h6><b>Serverul este bazat pe viata din Los Angeles.</b></a>.</h6>
         <h6><b><font style="color:#0d79c9;"><span class="glyphicon glyphicon-star"></span></font> Mai multe informatii pe <font style="color:#0d79c9;">forum</font>! <font style="color:#0d79c9;"><span class="glyphicon glyphicon-star"></span></font></b></a></h6>
         <div class="spacer1"> </div>
         <div class="spacer1"> </div>
         <button id="popup" onclick="div_show()"><span class="glyphicon glyphicon-pencil"></span> Inregistreaza-te </button>&nbsp;&nbsp;<a href="http://la-rp.ro/forum/ucp.php?mode=login"><button class="btn-transparent"><span class="glyphicon glyphicon-share-alt"></span> Logheaza-te</button></a><br>
         <div class="spacer1"> </div>
         <a href="samp://tobeadded"><button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-play"></span> Conecteaza-te</button></a>
         <div class="spacer1"> </div>
         <a href="http://files.sa-mp.com/sa-mp-0.3.7-install.exe"><button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-cloud-download"></span> Descarca SA-MP</button></a>
         <div class="spacer1"> </div>
         <a href="ts3server://89.40.70.173:9006"><button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-headphones"></span> Vorbeste pe TeamSpeak</button></a>
         <div class="footer">
            <a href="https://www.positivessl.com"><img src="img/comodo_secure_seal_113x59_transp.png" align="left"/>
            <a href="https://www.youtube.com/channel/UCAo06xj30A85GCvenFv8o0w"><img src="img/ytbutton.png" align="right" hspace="5"/> <a href="https://www.facebook.com/roleplaylarp/"><img src="img/fbbutton.jpg" align="right"/></a>
            <p>
               Copyright &copy; Los Angeles Roleplay 2017
         </div>
      </div>
      <script src="js/jquery.js"></script>
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

按此按钮时我想要

<button id="popup" onclick="div_show()"><span class="glyphicon glyphicon-pencil"></span> Inregistreaza-te </button>

弹出窗口会在用户屏幕上显示一个漂亮的动画，背景会有点模糊，我想在弹出窗口中放一个表单，但我需要的只是弹出窗口... < / p>

我已经制作了一个弹出窗口和一个phpscript来将输入发送到我的电子邮件但是它没有用，我没有收到任何电子邮件。

<?php 
$your_email ='andreigames9@gmail.com';// <<=== update to your email address

session_start();
$errors = '';
$name = '';
$visitor_email = '';
$nastere = '';
$forumname = '';
$parola = '';
$poveste = '';
$mgpg = '';

if(isset($_POST['submit']))
{

    $name = $_POST['field5'];
    $visitor_email = $_POST['field4'];
    $nastere = $_POST['field2'];
    $forumname = $_POST['field1'];
    $parola = $_POST['field3'];
    $poveste = ['field6'];
    $mgpg = ['field7'];
    ///------------Do Validations-------------
    if(empty($name)||empty($visitor_email))
    {
        $errors .= "\n Name and Email are required fields. ";   
    }
    if(IsInjected($visitor_email))
    {
        $errors .= "\n Bad email value!";
    }
    if(empty($_SESSION['6_letters_code'] ) ||
      strcasecmp($_SESSION['6_letters_code'], $_POST['6_letters_code']) != 0)
    {
    //Note: the captcha code is compared case insensitively.
    //if you want case sensitive match, update the check above to
    // strcmp()
        $errors .= "\n The captcha code does not match!";
    }

    if(empty($errors))
    {
        //send the email
        $to = $your_email;
        $subject="Creare caracter $name";
        $from = $your_email;
        $ip = isset($_SERVER['REMOTE_ADDR']) ? $_SERVER['REMOTE_ADDR'] : '';

        $body = "A user  $forumname submitted the contact form:\n".
        "Nume Forum: $forumname\n".
        "Email: $visitor_email \n".
        "IP: $ip\n";
        "Nume Caracter: $name\n ".
        "Parola: #parola\n".
        "Data Nasterii: $nastere\n".
        "Poveste Caracter:\n $poveste \n".
        "Definitii MG si PG:\n $mgpg ".

        $headers = "From: $from \r\n";
        $headers .= "Reply-To: $visitor_email \r\n";

        mail($to, $subject, $body,$headers);

        header('Location: thank-you.html');
    }
}

// Function to validate against any email injection attempts
function IsInjected($str)
{
  $injections = array('(\n+)',
              '(\r+)',
              '(\t+)',
              '(%0A+)',
              '(%0D+)',
              '(%08+)',
              '(%09+)'
              );
  $inject = join('|', $injections);
  $inject = "/$inject/i";
  if(preg_match($inject,$str))
    {
    return true;
  }
  else
    {
    return false;
  }
}
?>

<!DOCTYPE html>
<html lang="en">
<link rel="shortcut icon" href="https://sols-rpg.com/home/favicon.png" type="image/x-icon"/>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="height=device-height, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>LA-RP - Home</title>
<script type="text/javascript">
//<![CDATA[
try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:1482933530,byc:0,owlid:"cf",bag2:1,mirage2:0,oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/dok3v=1613a3a185/"},atok:"76d6adaf2e1ad169990326f51d43e159",petok:"4520fa4333a7ead90224eaba558cbb032249d63d-1483805698-1800",zone:"sols-rpg.com",rocket:"0",apps:{"abetterbrowser":{"ie":"7","opera":null,"chrome":null,"safari":null,"firefox":null}}}];!function(a,b){a=document.createElement("script"),b=document.getElementsByTagName("script")[0],a.async=!0,a.src="//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=f2befc48d1/cloudflare.min.js",b.parentNode.insertBefore(a,b)}()}}catch(e){};
//]]>
</script>
<link href="css/main.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation" style="border-bottom: #0d79c9 3px solid;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-logo"><img src="img/logov3.png"></div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" style="margin-top:6px;">
<li>
<a href="https://la-rp.ro/" style="color:#fff;"> <span class="glyphicon glyphicon-home"></span> <b>Acasa</b></a>
</li>
<li>
<a href="https://la-rp.ro/forum/"> <span class="glyphicon glyphicon-globe"></span> <b>Forum</b></a>
</li>
<li>
</li>
<li>
<a href="https://la-rp.ro/marketplace/"> <span class="glyphicon glyphicon-shopping-cart"></span> <b>Magazin</b></a>
</li>
<li>
<a href="https://la-rp.ro/info/"> <span class="glyphicon glyphicon-info-sign"></span> <b>Anunturi</b></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="banner">
<h1>Bine ai venit pe <font style="color:#0d79c9;">Los Angeles Roleplay</font>!</h1>
<h6><b>Serverul este bazat pe viata din Los Angeles.</b></a>.</h6>
<h6><b><font style="color:#0d79c9;"><span class="glyphicon glyphicon-star"></span></font> Mai multe informatii pe <font style="color:#0d79c9;">forum</font>! <font style="color:#0d79c9;"><span class="glyphicon glyphicon-star"></span></font></b></a></h6>
<div class="spacer1"> </div>
<div class="spacer1"> </div>
<button id="show" onclick="div_show()" class="btn-transparent"><span class="glyphicon glyphicon-pencil"></span> Inregistreaza-te </button>&nbsp;&nbsp;<a href="http://la-rp.ro/forum/ucp.php?mode=login"><button class="btn-transparent"><span class="glyphicon glyphicon-share-alt"></span> Logheaza-te</button></a><br>
<div class="spacer1"> </div>
<a href="samp://tobeadded"><button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-play"></span> Conecteaza-te</button></a>
<div class="spacer1"> </div>
<a href="http://files.sa-mp.com/sa-mp-0.3.7-install.exe"><button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-cloud-download"></span> Descarca SA-MP</button></a>
<div class="spacer1"> </div>
<a href="ts3server://89.40.70.173:9006"><button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-headphones"></span> Vorbeste pe TeamSpeak</button></a>
<div class="footer">
<a href="https://www.positivessl.com"><img src="img/comodo_secure_seal_113x59_transp.png" align="left"/>
<a href="https://www.youtube.com/channel/UCAo06xj30A85GCvenFv8o0w"><img src="img/ytbutton.png" align="right" hspace="5"/> <a href="https://www.facebook.com/roleplaylarp/"><img src="img/fbbutton.jpg" align="right"/></a>


<dialog id="window">  
    <form class="form-style-9">
<ul>
<li>
    <input type="text" name="field1" class="field-style field-split align-left" placeholder="Nume Forum" />
    <input type="text" name="field2" class="field-style field-split align-right" placeholder="Data Nasterii" />

</li>
<li>
    <input type="text" name="field3" class="field-style field-split align-left" placeholder="Parola" />
    <input type="email" name="field4" class="field-style field-split align-right" placeholder="Email" />
</li>
<li>
<input type="text" name="field5" class="field-style field-full align-none" placeholder="Nume_Prenume" />
</li>
<li>
<textarea name="field6" class="field-style" placeholder="Poveste Caracter"></textarea>
</li>
<li>
<textarea name="field7" class="field-style" placeholder="Defineste ce inseamna Metagaming si Powergaming plus exemple"></textarea>
</li>
<li>
<input type="submit" name="submit" value="TRIMITE" />
</li>
</ul>
</form>  
    <button id="exit" class="btn-transparent">Close Dialog  
</dialog>  
</div>

<p class="copyright">Copyright &copy; Los Angeles Roleplay 2017</p>

</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/my_js.js"></script>
<script src="scripts/gen_validatorv31.js"></script> 
<script src="scripts/validationAndCaptcha.js"></script>
</body>
</html>

Answer 1

下面是带有简单按钮单击弹出窗口的bootstrap模式：有关详细信息，请参阅link。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer 2

首先，请确保在文档的头部保留这两个脚本代码的引用，这是不好的做法。

<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

您可以在线查看示例以制作您自己的原型。如果你想了解关于HTML全局变量的所有信息（或者至少是你所做的参考文献），请务必查看this site。

这就是我设置文档标题的方式：

<head>
    <title> // 1x Title Tag
    <meta> // Subsequently, meta tags
          // which honestly I have not much experience using and I
         // assume are for dynamic styling on mobile devices, and SEO
    <link href> // link tags to css
    // and finally
    <script src="js/jquery.js"></script> // script tags
    <script src="js/bootstrap.min.js"></script> // and script code
    <script type="text/javascript">
//<![CDATA[
try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:1482933530,byc:0,owlid:"cf",bag2:1,mirage2:0,oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/dok3v=1613a3a185/"},atok:"76d6adaf2e1ad169990326f51d43e159",petok:"4520fa4333a7ead90224eaba558cbb032249d63d-1483805698-1800",zone:"sols-rpg.com",rocket:"0",apps:{"abetterbrowser":{"ie":"7","opera":null,"chrome":null,"safari":null,"firefox":null}}}];!function(a,b){a=document.createElement("script"),b=document.getElementsByTagName("script")[0],a.async=!0,a.src="//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=f2befc48d1/cloudflare.min.js",b.parentNode.insertBefore(a,b)}()}}catch(e){};
//]]>
    </script>
</head>

因为我认为自己有点资源，所以我打算建议使用纯javascript + css，没有额外的库，除非你希望将来自己写一个。你可以像其他人建议的那样在jQuery中完成它。

尽管我通常不推荐w3schools，但这是另一种方法：http://www.w3schools.com/howto/howto_css_modals.asp

也许你想了解他们是如何做到这一点的，并最终会超越他们。如果您仍然好奇，请在我的帖子上添加评论，以便我知道将您链接到CSS教程或HTML后续。

创建一个弹出窗口

2 个答案: