[SOLVED] How to create a non full screen popup?

Questions
1

I want a popup window similar to the one below

popup
popup.jpg342×608 21.5 KB

But Framework7’s popups are full screen on phone. How can I make one like the picture?

2

Use custom modal window

3

Thank you for your reply. That was a good hint. But I’m using V2. There is no documentation for it yet. I just could find “sheet modal” in the kitchen sink example. But that is not what I’m looking for. Can I customize it to look like the custom modal of V1.6?

4

Code from dialog component

new Dialog(app, {
            title: typeof title === 'undefined' ? app.params.dialog.title : title,
            text,
            content: '<div class="dialog-input-field item-input"><div class="item-input-wrap"><input type="text" class="dialog-input"></div></div>',
            buttons: [
              {
                text: app.params.dialog.buttonCancel,
              },
              {
                text: app.params.dialog.buttonOk,
                bold: true,
              },
            ],
            onClick(dialog, index) {
              const inputValue = dialog.$el.find('.dialog-input').val();
              if (index === 0 && callbackCancel) callbackCancel(inputValue);
              if (index === 1 && callbackOk) callbackOk(inputValue);
            },
          }).open();
5

Still no luck. dialogs have fix width. I want the pop up dialog to be 90% of the screen width. I wonder why it is so difficult to make such a simple dialog. Maybe I should install another plugin like vex.js.

6

You have css/javascript to change any parameters

7

http://framework7.io/docs/dialog.html

8

custom dialog example missed

9

Vertical Buttons is basically custom dialog

1 Like
10

Documentation for V2 is finally out! Thanks. I’ll try reading the docs and find the way.

11

Ok I read the documentation. I added css class to the dialog
this is the js

  $$('.open-vertical').on('click', function () {
  myApp.dialog.create({
    title: 'Set RGB',
    text: 'Dialog with vertical buttons',
    buttons: [
      {
        text: 'Button 1',
      },
      {
        text: 'Button 2',
      },
      {
        text: 'Button 3',
      },
    ],
    verticalButtons: true,
	cssClass: 'appdialog'
  }).open();
});

using the following css I get 90% width

 .appdialog{
	 width: 90% !important;
 }

but using left: 5%; or margin: auto; does not center the dialog.

12 
width: 90%;
left: 5%;
margin-left: 0;
1 Like
13

Thank you very much! It did it, I just had to use !important for margin-left to have it work.