How to make paper-dialog modal?

[Anders Forsell]

I am trying to use the paper-dialog in a Polymer element as a way of displaying a modal selection window. The problem is if I click outside the dialog it will be hidden under the other content.

Is it possible to make the paper-dialog modal so that it can only be closed by pressing one of its' buttons?

Thanks,

Anders

[Zach Clark]

Paper-dialog uses the core-overlay internally, but does not expose the core-overlay property you want ('autoCloseDisabled'). There is already a pull request in the pipeline for this (https://github.com/Polymer/paper-dialog/pull/7), so you could just wait for that to come through. If you wanted it now, the easiest way to get it without modifying the paper-dialog source would be to extend paper-dialog and set the property on its underlying core-overlay.

[Anders Forsell]

Great, thanks!

[Will Hopkins]

I just tried specifying 'autoCloseDisabled' on a dialog with the latest build of the master branch and it does stop the dialog from being dismissed when clicking on the background. It does not disable any of the background so items such as input fields and buttons remain active. If you want these disabled then you need to do this in you code. 

It would be nice have to have a option so that the dialog behaves more like an alert and no interaction with the web page is allowed until the user deals with the dialog.  

On Thursday, July 3, 2014 1:06:49 AM UTC-7, Anders Forsell wrote:

Great, thanks!

[Yvonne Yip]

You can use the "backdrop" property to achieve this effect. "backdrop" puts an element behind the dialog that fits to the viewport so you cannot interact with anything behind it. Example:

<paper-dialog backdrop autoCloseDisabled>

   Tap the button to dismiss!

   <paper-button core-overlay-toggle>OK</paper-button>

</paper-dialog>

Or, using paper-action-dialog:

<paper-action-dialog backdrop autoCloseDisabled>

   Tap the button to dismiss!

   <paper-button affirmative>OK</paper-button>

</paper-action-dialog>

You can style the backdrop using the "html /deep/ .core-overlay-backdrop" selector. Example:

html /deep/ .core-overlay-backdrop {

  /* transparent backdrop */

  background-color: transparent;

}

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/581bb79d-2c92-441e-9fab-50143f670ab4%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Darin Hensley]

This can be done also with making a custom element and paper-dialog-behavior. 

[Darin Hensley]

Here is a example from what I am using... if I wanted a modal I would do <video-player modal></video-player>

<link rel="import" href="../bower_components/google-youtube/google-youtube.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-dialog-behavior/paper-dialog-behavior.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/neon-animation/animations/fade-out-animation.html">
<link rel="import" href="../bower_components/neon-animation/animations/scale-up-animation.html">
<link rel="import" type="css" href="../bower_components/paper-dialog-behavior/paper-dialog-common.css">
<link rel="import" href="../bower_components/paper-styles/paper-styles.html">


<dom-module id="video-player">
  <style>
     :host {
      @apply(--layout-fit);
     }
  </style>
 


  <template>
    <template is="dom-if" if="{{show.video}}">
      <div class="layout vertical fit">
        <google-youtube style="height: 100%"
          video-id="YMWd7QnXY8E"
          rel="1"
          start="1"
          playsinline="0"
          controls="2"
          showinfo="0"
          width="100%"
          height="100%"
          autoplay="1">
        </google-youtube>
      </div>
      <template is="dom-if" if="{{show.backButton}}">
        <paper-button dialog-dismiss style="color: white; margin-top: 0px">
          <paper-icon-button icon="arrow-back"></paper-icon-button>
        </paper-button>
      </template>
    </template>
  </template>


  <script>
    Polymer({
      is: "video-player",
      behaviors: [
        Polymer.PaperDialogBehavior,
        Polymer.NeonAnimationRunnerBehavior
                 ],
      properties: {
        foo: { Object,
               notify: true
        },
        entryAnimation: {
          value: 'scale-up-animation'
        },
        exitAnimation: {
          value: 'fade-out-animation'
        }
      },
      listeners: { 'iron-overlay-opened': 'enableElement',
                   'iron-overlay-closed': 'stopPlayer'
      },
      timeWait: 300,
      startPlayer: function() {
        this.playAnimation('entry');
        this.show = { backButton: true};
        youtubePlayer = this.$$('google-youtube');
        if (youtubePlayer.playbackstarted) {
         youtubePlayer.play();
        }
      },
      enableElement: function(e) {
        this.show = { video: true};
        setTimeout(this.startPlayer.bind(this), this.timeWait);
      },
      stopPlayer: function(e) {
        this.timeWait = 0;
        this.playAnimation('exit');
        youtubePlayer = this.$$('google-youtube');
        youtubePlayer.pause();
        youtubePlayer.seekTo(1);
        this.show = { video: false,
                     backButton: false }
      },
      ready: function() {
        console.log("sssssssssssssssssSS");
       }
    });
  </script>
</dom-module>