Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QtWebEngine
  4. I hope to rewrite the js popover, How can I do this?
Forum Updated to NodeBB v4.3 + New Features

I hope to rewrite the js popover, How can I do this?

Scheduled Pinned Locked Moved Solved QtWebEngine
6 Posts 2 Posters 873 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • QtKingQ Offline
    QtKingQ Offline
    QtKing
    wrote on last edited by aha_1980
    #1

    Js popover title can be modified? Now you can see the url address in the js popover and the display is incomplete. I hope to rewrite the js popover and read the js popover title and fully display it as follows:
    0_1558427461221_844edc8d-5e07-4c80-8201-48b6c90f992a-image.png

    I would like to change it to the following display:
    0_1558427637974_740b6920-462a-4a45-89db-f4f70b21348f-image.png

    JonBJ 1 Reply Last reply
    0
    • QtKingQ Offline
      QtKingQ Offline
      QtKing
      wrote on last edited by
      #6
      class WebPage : public QWebEnginePage
      {
      	Q_OBJECT 
      public:
      	WebPage(QWidget *parent = 0);
      	~WebPage() {}
      protected:
      	void javaScriptAlert(const QUrl &url, const QString& msg) override
      	{
      		QMessageBox::warning(nullptr,"ALERT",msg+"\n"+url.toString());
      	}
      };
      
      1 Reply Last reply
      1
      • QtKingQ QtKing

        Js popover title can be modified? Now you can see the url address in the js popover and the display is incomplete. I hope to rewrite the js popover and read the js popover title and fully display it as follows:
        0_1558427461221_844edc8d-5e07-4c80-8201-48b6c90f992a-image.png

        I would like to change it to the following display:
        0_1558427637974_740b6920-462a-4a45-89db-f4f70b21348f-image.png

        JonBJ Offline
        JonBJ Offline
        JonB
        wrote on last edited by JonB
        #2

        @QtKing
        What is "js popover"? I can find no references. What exactly do you call/how does it come to appear?

        EDIT Ah, OK, it is e.g. https://www.w3schools.com/bootstrap/bootstrap_ref_js_popover.asp ? It would help if you gave a reference....

        So that says you have to specify title & data-content attributes. I suspect you're going to have problems trying to supply data-content to include a newline if that is what your screenshot implies you want. You could trying an embedded \n, but whether that will work or not I don't know.

        QtKingQ 1 Reply Last reply
        1
        • JonBJ JonB

          @QtKing
          What is "js popover"? I can find no references. What exactly do you call/how does it come to appear?

          EDIT Ah, OK, it is e.g. https://www.w3schools.com/bootstrap/bootstrap_ref_js_popover.asp ? It would help if you gave a reference....

          So that says you have to specify title & data-content attributes. I suspect you're going to have problems trying to supply data-content to include a newline if that is what your screenshot implies you want. You could trying an embedded \n, but whether that will work or not I don't know.

          QtKingQ Offline
          QtKingQ Offline
          QtKing
          wrote on last edited by
          #3

          @JonB You got me wrong. I want to rewrite Dialog, the alert window. I want to change its style. Change the title and redraw the contents of the Dialog.

          JonBJ 1 Reply Last reply
          0
          • QtKingQ QtKing

            @JonB You got me wrong. I want to rewrite Dialog, the alert window. I want to change its style. Change the title and redraw the contents of the Dialog.

            JonBJ Offline
            JonBJ Offline
            JonB
            wrote on last edited by
            #4

            @QtKing
            I don't know why you say "You got me wrong", setting existing dialog's title & data-content attributes would do just that.

            Anyway, whether you want to do that or whether you want to replace the dialog, won't you have to find where it's called and potentially have to change the popover.js file code to do what you want? Maybe this is a bootstrap [which you have never mentioned] rather than Qt question?

            QtKingQ 1 Reply Last reply
            0
            • JonBJ JonB

              @QtKing
              I don't know why you say "You got me wrong", setting existing dialog's title & data-content attributes would do just that.

              Anyway, whether you want to do that or whether you want to replace the dialog, won't you have to find where it's called and potentially have to change the popover.js file code to do what you want? Maybe this is a bootstrap [which you have never mentioned] rather than Qt question?

              QtKingQ Offline
              QtKingQ Offline
              QtKing
              wrote on last edited by
              #5

              @JonB If you implement it in JS, you can implement it like this,

              <!DOCTYPE html>
              <html lang="en">
              <head>
                 <meta charset="UTF-8">
                 <title>RERITE alert</title>
                 <script>
                     window.alert = function (txt, time) {
                         if (document.getElementById("alertFram")) {
                             return;
                         }
                         var alertDiv = document.createElement("DIV");
                         alertDiv.id = "alertFram";
                         alertDiv.style.position = "absolute";
                         alertDiv.style.left = "50%";
                         alertDiv.style.top = "40%";
                         alertDiv.style.marginLeft = "-225px";
                         alertDiv.style.marginTop = "-75px";
                         alertDiv.style.width = "450px";
                         alertDiv.style.height = "150px";
                         alertDiv.style.background = "#ccc";
                         alertDiv.style.textAlign = "center";
                         alertDiv.style.lineHeight = "150px";
                         alertDiv.style.zIndex = "10000";
                         alertDiv.innerHTML = "<ul style='list-style:none;margin:0px;padding:0px;width:100%'><li style='background:#DD828D;text-align:left;padding-left:10px;font-size:14px;font-weight:bold;height:27px;line-height:25px;border:1px solid #F9CADE;'>Tip</li><li style='background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;'>" + txt + "</li><li style='background:#FDEEF4;text-align:center;font-weight:bold;height:27px;line-height:25px; border:1px solid #F9CADE;'onclick='doOk()'><input type='button' style='background-color: #FDEEF4;border: none;outline:none;' value='OK'/></li></ul>";
                         document.body.appendChild(alertDiv);
                         var c = 0;
                         this.timer = function () {
                             if (c++ >= time) {
                                 clearInterval(ad);
                                 document.body.removeChild(alertDiv);
                             }
                         }
                         var ad = setInterval("timer()", 1000);
                         this.doOk = function () {
                             document.body.removeChild(alertDiv);
                         }
                         alertDiv.focus();
                         document.body.onselectstart = function () {
                             return false;
                         };
                     }
                 </script>
              </head>
              <body>
              <div onclick="alert('Hello ,New Dialog Style!!!')">
                 <p>please click it !!!</p>
              </div>
              </body>
              </html>
              

              But how do you override a Qt form if JS is just a normal alert implemented in Qt?

              1 Reply Last reply
              0
              • QtKingQ Offline
                QtKingQ Offline
                QtKing
                wrote on last edited by
                #6
                class WebPage : public QWebEnginePage
                {
                	Q_OBJECT 
                public:
                	WebPage(QWidget *parent = 0);
                	~WebPage() {}
                protected:
                	void javaScriptAlert(const QUrl &url, const QString& msg) override
                	{
                		QMessageBox::warning(nullptr,"ALERT",msg+"\n"+url.toString());
                	}
                };
                
                1 Reply Last reply
                1

                • Login

                • Login or register to search.
                • First post
                  Last post
                0
                • Categories
                • Recent
                • Tags
                • Popular
                • Users
                • Groups
                • Search
                • Get Qt Extensions
                • Unsolved