在“弹出窗口”中放置文本<p标签=“”

时间：2018-10-12 08:56:27

标签： jquery

=“”

我对Jquery相当陌生（阅读：全新） ，尽管我已经仔细研究了Jquery上的W3School段落。似乎那里有许多未更新的问题。

但是我被困在这里：

<html>
<head>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $('#pasbtn').on('click', function()
    {
        $("#popup-overlay").css({ visibility: "visible"});
        $("#popup-content").css({ visibility: "visible"});
    });
});
</script>

<script type="text/javascript">
$(document).ready(function(){
    $('#clsebtn').on('click', function()
    {
        $("#popup-overlay").css({ visibility: "hidden"});
        $("#popup-content").css({ visibility: "hidden"});
    });
});
</script>



<style type="text/css">
html
{
    z-index:        1;
}

.popup-overlay
{
  /* Hides pop-up when there is no "active" class */

    visibility:     hidden;
    position:       absolute;
    background:     #ffffff;
    border:         3px solid #666666;
    width:          50%;
    height:         50%;
    left:           25%;
    z-index:        10;
    border-radius:  15px;


}
.popup-overlay.active
{
  /* displays pop-up when "active" class is present */

  visibility:       hidden;
  text-align:       center;
}

.popup-content
{
  /* Hides pop-up content when there is no "active" class */

  visibility:       hidden;
}

.popup-content.active
{
  /* Shows pop-up content when "active" class is present */

 visibility:        visible;
}

button
{
  display:          inline-block;
  vertical-align:   middle;
  border-radius:    30px;
  margin:           .20rem;
  font-size:        1rem;
  color:            #666666;
  background:       #ffffff;
  border:1px solid  #666666;
}

button:hover
{
  border:           1px solid #666666;
  background        :#666666;
  color:            #ffffff;
}

button2
{
/* tbd */
}



.pos22
{
position:   absolute;
left:       150px;
top:        25px;
width:      100px;
height:     25px;
border:     1px solid black;

}

.passblok
{
    position:   Absolute;
    left:       750px;
    top:        155px;
    width:      250px;
    height:     65px;
    border:     2px solid black;
    border-radius:  25px;
    background-color:   lightgreen;
}

.admblok
{
    position:   Absolute;
    left:       965px;
    top:        570px;
    width:      50px;
    height:     25px;
    font-family:    Arial;
    font-size:      8px;
}



.pos2
{
    position:   Absolute;
    left:       50px;
    top:        325px;              /* 100px */
    width:      950px;
    height:     235px;
    border:     1px solid blue;
    overflow:   auto;
}


.klokkeblok
{
    position:   Absolute;
    left:       200px;
    top:        290px;              /* 100px */
    width:      200px;
    height:     25px;
    border:     1px solid blue;
}

.selform
{
    position:   absolute;
    left:       50px;
    top:        275px;
    width:      105px;
}

TR
{
    height:     25px;
}

TD
{
    height:         25px;
    width:          100px;
    text-align:     Center;
    font-family:    Verdana;
    font-size:      12px;
}
.td2
{
  width:            35%;
}

.td3
{
  width:            35%;
  background-color: lightblue;
}

input
{
    border:         1px solid black;
}

.brg
{
    position:       absolute;
    left:           750px;
    top:            285px;
    width:          200px;
    height:         25px;
    font-family:    Arial;
}


</style>


</head>

<body>
   <div class="popup-overlay" id="popup-overlay">       <!--Creates the popup body-->
      <div class="popup-content" id="popup-content">    <!--Creates the popup content-->
          <center>
            <P class='pmsg1' id='pmsg1'>bla1 bla1 bla1 </P>
            <P class='pmsg1' id='pmsg2'>bla2 bla2 bla2 </P>
            <P class='pmsg1' id='pmsg3'>bla3 bla3 bla3 </P>
            <P>&nbsp;</P>
            <button class="close" id="clsebtn">LUK </button>     <!--popup's close button-->
          </center>
   </div>
</div>


<!--   ....  rest of HTML code ..       -->

   <button class = 'button2' id='pasbtn'>SOME TITLE</button>

<!--    ....  More HTML code            -->
</body>
</html>

What I want is this:


<html>
<head>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $('#pasbtn').on('click', function()
    {
        $("#popup-overlay").css({ visibility: "visible"});
        $("#popup-content").css({ visibility: "visible"});
    });
});
</script>

<script type="text/javascript">
$(document).ready(function(){
    $('#clsebtn').on('click', function()
    {
        $("#popup-overlay").css({ visibility: "hidden"});
        $("#popup-content").css({ visibility: "hidden"});
    });
});
</script>



<style type="text/css">
html
{
    z-index:        1;
}

.popup-overlay
{
  /* Hides pop-up when there is no "active" class */

    visibility:     hidden;
    position:       absolute;
    background:     #ffffff;
    border:         3px solid #666666;
    width:          50%;
    height:         50%;
    left:           25%;
    z-index:        10;
    border-radius:  15px;


}
.popup-overlay.active
{
  /* displays pop-up when "active" class is present */

  visibility:       hidden;
  text-align:       center;
}

.popup-content
{
  /* Hides pop-up content when there is no "active" class */

  visibility:       hidden;
}

.popup-content.active
{
  /* Shows pop-up content when "active" class is present */

 visibility:        visible;
}

button
{
  display:          inline-block;
  vertical-align:   middle;
  border-radius:    30px;
  margin:           .20rem;
  font-size:        1rem;
  color:            #666666;
  background:       #ffffff;
  border:1px solid  #666666;
}

button:hover
{
  border:           1px solid #666666;
  background        :#666666;
  color:            #ffffff;
}

button2
{
/* tbd */
}



.pos22
{
position:   absolute;
left:       150px;
top:        25px;
width:      100px;
height:     25px;
border:     1px solid black;

}

.passblok
{
    position:   Absolute;
    left:       750px;
    top:        155px;
    width:      250px;
    height:     65px;
    border:     2px solid black;
    border-radius:  25px;
    background-color:   lightgreen;
}

.admblok
{
    position:   Absolute;
    left:       965px;
    top:        570px;
    width:      50px;
    height:     25px;
    font-family:    Arial;
    font-size:      8px;
}



.pos2
{
    position:   Absolute;
    left:       50px;
    top:        325px;              /* 100px */
    width:      950px;
    height:     235px;
    border:     1px solid blue;
    overflow:   auto;
}


.klokkeblok
{
    position:   Absolute;
    left:       200px;
    top:        290px;              /* 100px */
    width:      200px;
    height:     25px;
    border:     1px solid blue;
}

.selform
{
    position:   absolute;
    left:       50px;
    top:        275px;
    width:      105px;
}

TR
{
    height:     25px;
}

TD
{
    height:         25px;
    width:          100px;
    text-align:     Center;
    font-family:    Verdana;
    font-size:      12px;
}
.td2
{
  width:            35%;
}

.td3
{
  width:            35%;
  background-color: lightblue;
}

input
{
    border:         1px solid black;
}

.brg
{
    position:       absolute;
    left:           750px;
    top:            285px;
    width:          200px;
    height:         25px;
    font-family:    Arial;
}


</style>


</head>

<body>
   <div class="popup-overlay" id="popup-overlay">       <!--Creates the popup body-->
      <div class="popup-content" id="popup-content">    <!--Creates the popup content-->
          <center>
            <P class='pmsg1' id='pmsg1'>bla1 bla1 bla1 </P>
            <P class='pmsg1' id='pmsg2'>bla2 bla2 bla2 </P>
            <P class='pmsg1' id='pmsg3'>bla3 bla3 bla3 </P>
            <P>&nbsp;</P>
            <button class="close" id="clsebtn">LUK </button>     <!--popup's close button-->
          </center>
   </div>
</div>


<!--   ....  rest of HTML code ..       -->

    <script>
    $('#pmsg1').text = 'My text 1'; 
    $('#pmsg2').text = 'My text 2';
    $('#pmsg1').text = 'My text 3';
    </script>

   <button class = 'button2' id='pasbtn'>SOME TITLE</button>

<!--    ....  More HTML code            -->
</body>
</html>

我已经尝试过：

$('#msgN').text = 'bbb ';   
$('#msgN').val = 'bbb ';  
$('#msgN').text() = 'bbb ';   
$('#msgN').val() = 'bbb '; 
$('#msgN').text(); = 'bbb ';   
$('#msgN').val(); = 'bbb ';

当我尝试最后2个脚本时，脚本根本没有回答==错误！

我的目的是将该弹出窗口用作一般的Error Messenger弹出窗口，并根据错误条件更改msg文本。

我在做什么错了？

3 个答案:

答案 0 :(得分：1)

尝试

<script>
    $('#pmsg1').text('My text 1'); 
    $('#pmsg2').text('My text 2');
    $('#pmsg1').text('My text 3');
</script>

答案 1 :(得分：1)

尝试

$('#msgN').text('bbb ');

代替

$('#msgN').text(); = 'bbb ';   
$('#msgN').val(); = 'bbb ';

答案 2 :(得分：1)

.text()与您差不多，除了.val()和.text()是jQuery对象的方法。您不会以尝试的方式为方法分配值，而是将参数传递给它们：

$('#msgN').text('bbb ');
相关问题
最新问题