Reputation: 291

PUT text in "pop-up window" <P tags

I'm pretty new (read: brand new) to Jquery, although I have studied the W3School paragraph on Jquery carefully. It appears that there are many not updated issues there.

But I'm stuck here:

<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>

I have tried :

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

When I tried the last 2 the script did not answer at all == error!

My purpose is to use that pop-up window as a general Error messenger POP-up and changing msg text depending on error-condition(s).

What am I doing wrong?

Upvotes: 1

Answers (3)

George

Reputation: 36794

You're nearly there with .text(), except .val() and .text() are methods of the jQuery object. You don't assign values to methods in the way you're attempting to, you pass parameters to them:

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

Upvotes: 1

Kiranramchandran

Reputation: 2094

try

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

Instead of

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

Upvotes: 1

khan Farman

Reputation: 366

try this

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

Upvotes: 1

PUT text in &quot;pop-up window&quot; &lt;P tags

Answers (3)

Related Questions

PUT text in "pop-up window" <P tags